How to set full width for items
Hello community, I am trying to set the gray background to be the size of the screen, but the width property doesn't seem to do that.
Any links or ideas are welcome.
6 Replies
100% is full width of the container, the container is not the width of the screen
Sorry do you mind elaborating a bit further?
I had a look online to see how to set the elements based on the resolution but I didn't get a lot from that.
It entirely depends on the layout of your HTML. I don’t have a link to it to pin point where the issue is.
I see you’re using flex which by default stretches children in the perpendicular axis. If what you have is flex box all the way down you may accidentally have a row one at the root.
Or you have set a width or a max-width somewhere.
You can size the element according to the width of the viewport using 100vw or use 100%, using 100% the element will use the entire width of the parent element, in this case if the parent of your element is the BODY of your html , it will extend across the entire screen.
I personally only use the VW measurement in the font-size property, the best option in my opinion is to size it according to the body of the document, using the percentage.
When you use 100vw to add a color to the element body, it creates a side scrollbar, you can remove it using overflow-x: hidden
You should never use
width: 100vw I can't think of any legitimate reason to use it. Things being block and already taking up as much width as it can is enough.
Also you should never use overflow: hidden to bodge fixes. If you have an unexpected overflow, fix it, don't hide itThank you @Chaves and @z- ::theProblemSolver:: for some reason I didn't think about the width of the parent element but now it makes a lot more sense.