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
Not Found
Not Found
Not Found
Not Found

Submitted

Four-card-feature-section grid&flex

Guettaf 50

@Guettaf-Mazigh

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Niloy Das 230

@NiloyDas07

Posted

Hey, your site is working fine for the screen sizes above around 1200px. But for anything smaller, the content is overflowing. I think it might be because you used fixed widths for your cards etc.

Also there should be something wrong with the media query logic as well, because no mobile view is applying to it.

So, you just need to work on the responsiveness a bit. Goodluck. :-)

1

Guettaf 50

@Guettaf-Mazigh

Posted

Hey @NiloyDas07, thanks for your feedback. I've made the necessary adjustments to ensure the site displays correctly on all screen sizes. Feel free to check it out.

I've also added a media query for tablet screens. :)

1
Niloy Das 230

@NiloyDas07

Posted

@Guettaf-Mazigh Well done! It looks really great now. Btw, I just noticed that you never changed the box-sizing property to border-box in your CSS. I don't know if you did it intentionally. But if not, then I seriously suggest that you learn about the box models in CSS. The default setting for that can be really annoying to work with when using margins, paddings or borders.

Marked as helpful

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