Four Cards Section With Flexbox

Community feedback

• 

  Leshy•580

  @LeshyNLPosted over 4 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.

  1

  ---

  

  Paulo Wells•360

  @wellsprPosted over 4 years ago

  @LeshyNL, thank you very much for your feedback and link, I'll surely get into this issue. In this project, I only adjusted the proportions imposed on the design. It seems I need to add another breakpoint for medium-sized screens to keep better control of the font-sizes and make a smooth bridge between small and large screens, right? Also, I could add breakpoints for extra-small and extra-large screens as well.

  0

  

  Leshy•580

  @LeshyNLPosted over 4 years ago

  @wellspr No worries, it was more of comment on using vw for font-size in general.

  For the purpose of these challenges, I certainly would not spend too much time on catering for screen sizes not indicated in the challenge brief.

  However, the objective of responsive design is of course to ensure that pages are usable at more or less any screen size. I would say that throwing in an extra breakpoint just to ensure a smoother transition or to put some limit on the growth/shrinkage of some elements is absolutely fine and probably good practice.

  Just my two cents :)

  0