Skip to content
Submitted 11 months ago

four cards features solution

Johan•200
@CallensJ
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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,840
    @BlackpachamamePosted 11 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
    0

Please log in to post a comment

Log in with GitHub

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