Responsive Four Card Feature Layout Section

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted 17 days ago

  Hello Bruno514, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

  You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader.

  You can read more in MDN.

  The rest is spot on.

  Hope it’s helpful to you. 👍

  Marked as helpful

  1

  ---

  

  Bruno514•100

  @Bruno514Posted 17 days ago

  @AdrianoEscarabote Thank you for the suggestion and I’m glad you liked the solution! You are right, I actually used <br> as a lazy hack, and I will indeed not use it from now on.

  0
• 

  Martin Liesche•550

  @marliedevPosted 18 days ago

  I really like the solution! It adjust very good to the different screen sizes.

  When it comes to responsive font-adjustments you can have a look at the clamp()-function

  font-size: clamp(0.875rem, calc(1rem + 1vw), 2rem);
  

  And because i'm a big fan of structuring and naming: Have a look at BEM and SMACSS! Could really improve your work.

  Marked as helpful

  1

  ---

  

  Bruno514•100

  @Bruno514Posted 18 days ago

  Thank you for the reply @marliedev! Very useful this way of using clamp and calc. I will also have a look at BEM and practice it more, I just didn’t find it much useful for such small projects like this one.

  0