Skip to content
Submitted 6 months ago

Responsive four cards

Aaron Smith•280
@medic-code
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?

Getting the components in a responsive manner. I would start with CSS grid for desktop view first.

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

Not too bad actually, mostly around centering the grid and getting the correct distances.

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

HTML Semantics CSS structure and layout approach

Community feedback

  • Julianna Messineo•180
    @mathematiCodePosted 6 months ago

    When I open your published site on chrome and firefox, the top title "Reliable efficient delivery" gets cut off. It looks almost exact to the design screenshot so I'm not sure why they don't match. I used grid in a similar way to you. I ended up creating a separate div to place the icons in the bottom right.

    0
    Aaron Smith•280
    @medic-codePosted 6 months ago

    Hi Julianna @mathematiCode that's odd as i was using chrome heavily in testing my CSS changes and just previewed the published site now and the top title seems to be there! Not sure you can provide a screenshot, but worth checking again!

    Nice on icon front just goes to show there's multiple ways to do something! Flex-end seemed easy enough to get the icons where i wanted it to go.

    0
    Julianna Messineo•180
    @mathematiCodePosted 6 months ago

    I'm not sure why, when I zoom out on chrome to 90% I can see it just fine. On firefox I have to zoom out a bit more. Maybe you are using a taller screen? I'm on a 13in macbook. I'm not sure, but even my own screenshot for this project looks a lot smaller on the frontendmentor screenshot than it did in the browsers.

    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