Four card feature section using Sass

Community feedback

• 

  InterplanetaryDragon•320

  @InterplanetaryDragonPosted over 4 years ago

  Can't help with SASS as I'm a newbie but I believe the only way to have responsive text is to use the viewport, so set it to, for example, 4vw. However, it can be difficult to get right and isn't always a good solution.

  Depending on the size and layout of elements, flexbox is great for responsive layouts as it will move your divs as the screen shrinks or gets larger. Though you do still sometimes need media queries for sizing, even if you don't for position. Though using percentages for your sizes can help with responsiveness. For example, having a div always take up 75% of the width.

  This site has some neat videos on flexbox. Skip though you know, but I found some useful tips in the later videos.

  https://scrimba.com/g/gflexbox

  CSS Grid also makes it really easy to move and rezize content (assuming your content doesn't have fixed sizes). You still need a media query to create a new grid and reposition elements, which takes a minute. Your content should then fill the grid area.

  1
• 

  InterplanetaryDragon•320

  @InterplanetaryDragonPosted over 4 years ago

  Update: I have had some success with responsive headers. I set my :root font size to 10px so that the math for rem is easy. :root { font-size: 10px }

  then I set my body text to 1.8rem (18 pixels).

  For my headers I've used the following: h1 { font-size:calc(1.8rem + 1.3vw); }

  h2 { font-size:calc(1.8rem + 0.7vw); }

  h3 { font-size:calc(1.8rem + 0.4vw); }

  0