Skip to content
Submitted 9 months ago

Responsive Four Card Feature Layout Section

sass/scss
Bruno514•100
@Bruno514
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of how the layout turned out to be and how responsive it is.

What challenges did you encounter, and how did you overcome them?

Had some difficult with making my font-size responsive

Code

Please log in to post a comment

Log in

Community feedback

  • Adriano•42,890
    @AdrianoEscarabote

    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
  • Martin Liesche•590
    @marliedev

    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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord