Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
read ECONNRESET
Not Found
Not Found
Not Found

Submitted

Four card feature section - Updated Soloution

Johnny416 20

@Johnny416

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey! I updated my recent soloution of this project with some more media queries for mobiles, tablets and smaller screen monitors. I also fixed the image aligning with margin.

Community feedback

@Senatrius

Posted

Right, so I did just notice the updated version as I posted the comment on the old version. Here we go again.

The icons are still going outside the card at width 1150px and then again at 895px. Using flexbox on each of the cards and then aligning all the elements within using align-items and justify-content instead of using direct values should make it more responsive. There's only so many media queries you can add for every screen resolution until you start losing your mind. Trust someone who did that before :)

However, it is a clear and significant improvement over the last upload. Keep at it and you'll be building websites with the best of them sooner rather than later :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

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