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

Responsive four cards

P

@medic-code

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


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

@mathematiCode

Posted

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

P

@medic-code

Posted

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

@mathematiCode

Posted

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
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