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 master

Piotr 250

@Piotrek1994

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


I don't understand when I have screen narrower then 655px it's hard to change height of body and whole layout crashed. Can somebody tell me why? :(

Community feedback

Lucas 👾 104,420

@correlucas

Posted

Hello Piotr, congratulations for finishing this challenge! This is a tricky grid!

I took a look on your web site and I saw something that can cause the problem after the width 625px. I saw that in some elements you applied some fixed values, for example for the description you set width: 18rem; this is a fixed value, this means that this div will be not smaller of bigger than this value, if you put max-width instead this will make the div stretch and become smaller.

To make the grid flexible you have to set the width with max-width your set one media queries indicating when you want this values change. You can try to use the max-width approach to the elements you want a flexible state. Probably this will fix the problem for mobile screens.

I hope it helps you dude! Keep it up!

Marked as helpful

0

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