Grid Layout And Responsive Units
Note: the intended audience for this post are folks familiarized with coding in scss/css, so i’m not breaking down the language or concepts These are two issues particularly to handling very large screen widths (over 1550px)
Issue with using responsive units
In this case, I was specifically using vw
, vh
- they’re helpful in that you can manipulate size of an element based on the width or height of the window. Not helpful when those elements have other inner elements which own position is pretty (for example, vertical positioning). example:
- I was using
vh
andvw
to control an ellipse background shape with an image. My reasoning was that the position of the background element should be relative to the width of the image. - Having to manage 3-4 breakpoints was fine, but a little tedious. And then i was made aware I needed to also include screen widths larger than 1600 px, which made this solution more difficult to manage - the larger widths added the need to manage the proportions in smaller increments. So, instead of only needing to add one value between the small tablet (768px min) and large tablet (992px), i now needed to account for every breakpoint every 100px past 1500px. Which, nah.
- So what i did instead was switch the position of this background element to the width of the parent element,which stops expanding after the 1200px (i was using bootstrap so using their grid + breakpoints), so i only needed to add the numbers up to that breakpoint and not worry about the rest. Boom
Full-width elements with grid display
Grid display is a little tricky already, especially when dealing with text content that can vary in length. I had to use this method for an element with multiple elements whose position across widths did not smoothly match a basic flex display where column + row stack follows a predictable order: