Skip to content
Submitted 22 days ago

Responsive Four card design

Declan•320
@engelbrechtz
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

What are you most proud of, and what would you do differently next time?

I achieved the primary goal of making all screen sizes responsive to the layout provided by the design

What challenges did you encounter, and how did you overcome them?

Having to review the way I approached the responsive design using media queries, there needs to be a lot of changes on tablet view, otherwise mobile, desktop are responsive.

What specific areas of your project would you like help with?

Responsive design.

Community feedback

  • Martin Liesche•570
    @marliedevPosted 22 days ago

    Hi Declan! Your solution Looks fine. The code is well structured and readable, but here are some things, that could be improved:

    • you could improved your HTML structure, by removing the card-content and card-Image div. They are not really needed for this simple structured card.

    • you have too much media queries (3) in a narrow range (600/730/740px) and also duplicated and unnecessary code (e. g. for the coloring of the cards)

    • best solutions for this challenge is to using grid, a mix of grid and flexbox or, when using only flexbox, place those two cards in the center in a seperate column.

    Hope it helps!

    Marked as helpful
    2
  • Sherzod•310
    @SherzodToshpulatovPosted 22 days ago

    Looks good! site does not appear in the middle of the phone display. you can give flex to the main container to fix that.

    Marked as helpful
    1

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