KPC
Kevin Powell - CommunityRIZE Hobberz

How to add stuff off of my sidebar

I want to add stuff on the right side of my website but it isnt showing up
No description
RH
RIZE Hobberz•15d ago
S
Shane•15d ago
your "side nav" is position fixed causing it to obscure anything on the left of the page
RH
RIZE Hobberz•15d ago
Yeah I know I want the left to start at the right of the side nav But when i try adding stuff it goes on the bottom left of the page and adds a white bar bellow the grey And the h1 gets hidden by the side nav Do i need to add a div And give it a margin-left of 250 px?
S
Shane•15d ago
try starting with a simpler codepen, where it is just two boxes you could use flex or grid here
RH
RIZE Hobberz•15d ago
I dont understand what you mean Yeah i suck at flex And never tried grid I made most of the side nav with flex I wouldve thought a margin left would work?
S
Shane•15d ago
No description
S
Shane•15d ago
No description
S
Shane•15d ago
html,body{
  margin:0;
  height: 100%;
}
.page-container{
  background: blue;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}
.box1{
  background:red;
  width: 100%;
  max-width: 250px;
}
.box2{
  background: purple;
  width: 100%;
}
html,body{
  margin:0;
  height: 100%;
}
.page-container{
  background: blue;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}
.box1{
  background:red;
  width: 100%;
  max-width: 250px;
}
.box2{
  background: purple;
  width: 100%;
}
This is a simple demo with flex
RH
RIZE Hobberz•15d ago
Im trying to understand And it isnt working is there an easier way to doing this its really confusing me i think ive done it i have a div called main and in the css i gave it padding of 250 px then in that div ive got a content div with text align cenete center
RH
RIZE Hobberz•15d ago
No description
S
Shane•15d ago
try starting with a clean slate and making the whole page a flexbox, where the sidebar is a flex item and the page content a flex item, like I showed you in my screenshots the way you are doing it is not at all responsive and pretty jank tbh
Want results from more Discord servers?
Add your server
More Posts
Using escaped unicode in contentIs it possible to use escaped unicode in content to get emoji combinations like Phoenix for example,Github blocked push due to secretsIt was right, my `rest.http` file was misspelt in my `gitignore`. But now it's correct and git is Trying to get the cards over each other properlyI want to set the back-card under the front-card with wider and shorter than the front-card, but couOverflow Issuehttps://w5bkz10l-3000.inc1.devtunnels.ms/ I'm trying to find which section is overflowing, tried inpUsing Vite with SCSSSo i was advised to try scss with vite instead of just using node as i was getting errors. What i dAbsolute position with gridI need help to position a text and image inside a grid item which size its 2fr but trying to positiSVGs <use> and not...Hi guys I really would aprecciate come help here. In this HMTL are two ways of using svgs but one ofHandling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?GH:https://github.com/nnall/hm-frontend-Nick.git I have an element in my react return, several realReact + Tailwindcss users? Help with some examples please!I'm trying to learn this damn thing, unfortunately every job here uses it and I've done nothing but Navbar helpi cant get the navbar to go end to end on the pageVS code control panelhey guys does anyone know how can i add source control button in my vs code left panel i tried everyAdding code blocks to websitesI see some websites and blogs like this have these really nicely styled code blocks with syntax highFlexbox column swap without media or container querie.I watched this video by KP (https://www.youtube.com/watch?v=LEkFckg7sfw), and got the flex solution Is there a way to test for css nesting support?I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make<a/> in component return being auto-assigned "button" class somehow, overwriting my classNamesThis is the relevant portion of the return: ``` <ul className="quickLink_list"> <li> creating calculator``` let operatorsArray = document.querySelectorAll('.operator') function bgColor(a){ let bgColLogin Page Improvements/ChangesI'm still learning html and css. What can I improve in my login page? <body> <div class="main-cAnimating outline offsetsIs there a smoother way to animate the offset of an outline? It looks choppy. https://codepen.io/nVertical alignment without wrapper?Problem: https://codepen.io/peendoc/pen/YzMgrwN I want the links to be clickable along the entire heAccessibility with icons/ images in linksHey everyone, I have been looking around with no real luck about the best practice for using svg's a