Rinconcito - Amor as lucha

Grid Layout And Responsive Units

Category:
Learning

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:

  1. I was using vh and vw 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.
  2. 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.
  3. 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:

Graphic showing elements stacking in three rows phone, and in tablet positioned in their separate columns in the same order with Flex display Graphic showing columns stacking horizontally phone, and grid display on tablet, with first two columns stacked in two rows in 1st column and 3rd element in its own 2nd column