main container should be 90% of the screen size
should i give % values for main container and work there or it will fit accordingly when i add all elements
13 Replies
so if you want it to be 90% width
width: 90%;
yeah i did that, by the looks the main container (the entire content) is not 90% of the screen height/width
what do your devtoolssay?
What’s the code look like? Percentage is based on the patent element so if it’s not at 100% then the element you’re working on won’t be 90% off the viewport.
Of course, avoid the compounding issue you could use
90vw instead. Most of the viewport unit issues arise from height and not with. I hope im not confusing
I’m a big fan of letting the content dictate the size of its element and seeing all those set height and widths make me cringe
so how should i do it??? cause content div has background image so setting width is going to be crazy
Background images changes things a bit since they don’t inherently have any size. In that case, I would suggest using
aspect-ratio and setting a width.
But honestly, a lot of weather apps get by just fine with one column and each new section below the previous. Very mobile-friendly and you don’t need to worry about breakpoints due when to do side-by-sidei wanted to do something like this. i want it to be responsive.
so without setting height and width how should one proceed ? how would you do it
If you want that kind of layout you’ll need to set with for sure. Both flexbox and grid can auto-scale height to match
My suggestion would be this:
For the main content, the side-by-side bit, is to use grid: 3fr, 1fr. This way the left-side content is 75% of the available width and the sidebar is the remaining 25%. Give a gap of 2rem or so.
The inner bits of the left-hand column could be done in either flex or grid, whichever you prefer. I see three block-level elements: upper text, inner third, and bottom daily. using either
1fr or flex-basis: 0 will make them all the same width without having to specify.
From there, it's just a matter of laying out each individual element like normal. I don't see anything inside any of them that requires any fancy CSS (besides the background image on the right-most of the middle thirds).
For responsiveness, you'll want a breakpoint where the sidebar drops below the main content. Same for the mid-thirds of the left-side column. If you want the daily forecast to always be in a line like that you need to add overflow-x: scroll;ok Thats a lot of things to process. quite frank i dont know anything about grid. so i have to look into it
One thing about grid is that it cannot be used in flexbox right?
Flex can go in grid but not the other way?
There is nothing stopping you from using a grid within flexbox
You can nest either in the other