Submitted 9 months ago

four cards features solution

Johan• 200

@CallensJ

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello, here's my solution for this challenge. Everything's fine i think however for the desktop size since i had to set 2 of the four cards on absolute position i had problems when resizing from mobile view to desktop. theses to absolutes cards would pass hover. i think the problem come from the width of my media queries or of the cards max-width. Anyway thanks for the design.

Community feedback

Marcos Travaglini• 4,920

@Blackpachamame

Posted 9 months ago

Hey Johan! your work is very good. I think the ideal for this specific challenge was to work with grid CSS or at least it is a good challenge to put it into practice.

Everything looks correct, but I can tell you the following:

If you would like to center the content in the center of the screen, instead of using height: auto you can use min-height: 100vh
The cards on the sides overlap with those in the center at a certain screen width
It is curious that you have not applied a background-color to your cards, even if they are the same color as the body because you should define it in the same way
Here is my solution in case you want to take a look

Please log in to post a comment

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