Four Cards Section With Flexbox

Community feedback

• 

  Leshy•580

  @LeshyNL

  Posted about 5 years ago

  Hi,

  Good job on the challenge. It works well, is fully responsive and looks fine at all sizes.

  One bit of feedback that I could give is that basing the font size solely on the viewport width can lead to some accessibility and usability issues for very narrow and larger layouts; indeed, at larger widths before the breakpoint in your solution, the header and intro text become rather large.

  You can solve this by setting media queries for a minimum and maximum font size at certain widths, or set the font size to be something like 1rem + 0.5vw, so that it does scale with window size, but cannot go below a certain size (and then set a media query for a maximum size).

  There is also a new clamp() function that allows you to set minimum and maximum values, but support for mobile browsers seems to still be a bit lacking.

  See https://css-tricks.com/how-do-you-do-max-font-size-in-css/ for more info.

  12