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

box-shadow, Grid layout.

Ohad 50

@ohad331

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


Hi there, I would love to get some feedback about my updated solution using the grid layout for the first time. thanks a lot!

Community feedback

Igor 110

@bubahaze

Posted

Hi Ohad, yes, grid is indeed a valid way to do this, especially that your layout is in a mess on different resolutions. Try to make a grid of all boxes (together with text-box) and put it in a wrapper with display: flexbox, this will allow you to make this layout stable while displaying on different screen resolutions. Search for grid-template-areas and I recommend you Mozilla Firefox: Developer Edition browser to display your grid-model in a helpful way to see how you could improve your code. For mobiles a flexbox and flex-direction: column will be sufficient. You are doing great and keep working, watch other people's solutions, that's what helped me to improve my version of this challenge ;) Cheers, mate!

Marked as helpful

1

Ohad 50

@ohad331

Posted

@bubahaze Thank you very much Igor, your comment was very helpful. I have updated my solution and used the grid layout (for the first time). So if you have any comments about my code I would love to hear it!!

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