adaptive pixel perfect layout with flexbox and media (hover)

Community feedback

• 

  P

  Eli Silk•660

  @elisilkPosted 4 months ago

  Hi again @Godskitchen!

  Congrats on another successful solution to another design challenge! ✅ Your solution seems to match the design perfectly.

  Things I think you did amazingly well in your solution 🎉:

  • The use of clear and well structured semantic HTML
  • The use of SASS for your CSS
  • The inclusion of a hidden h1 tag for accessibility

  Here's something to consider thinking about 🤔, similar to my comment on your solution to the QR code component design challenge:

  In your CSS file (lines 19-27):

  html {
    font-size: 1.1111111111vw;
    height: 100%;
  }
  @media (max-width: 768px) {
    html {
      font-size: 4.2666666667vw;
    }
  }
  

  This effectively resets the rem (root em) value and makes a big jump as you go from a 768px screen width up to a 769px screen width:

  • 769px * .011111111111 = 8.54px
  • 768px * .042666666667 = 32.768px

  The result is that your solution ends up in a place that matches the design when you get either to 1440px (the desktop design) or 375px (the mobile design). However, when the screen size is different than those key sizes (especially right around 768px), the solution can do some funny things that I'm not sure you intended.

  You might consider taking out the media query all together. Instead, you can obtain fluid typography at different screen sizes by taking advantage of the vw units inside of a clamp function. The clamp function ensures that the font sizes never get too small or too large by setting the lower and upper boundaries with a fluid size in between. Here is a great resource for learning more about this approach:

  https://web.dev/learn/design/typography

  I hope you find my feedback helpful! 🌟

  Happy coding! 😎

  Marked as helpful

  0

  ---

  

  P

  Godskitchen•50

  @GodskitchenPosted 4 months ago

  Hi again @elisilk! I've followed to your advice and have read some info about fluid typography. After that I replaced media queries to clamp funcs for font-size. Looks good, thank you!

  0