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

Four card feature section solution. Built with Grids, Flexbox and Pos.

Isenraf 220

@Isenraf

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


Got some hard time when trying to make it responsive. Need some advice guys :).

Community feedback

@AgataLiberska

Posted

Hi @Isenraf! The easiest way is to start with the mobile design - not sure which design you went with first but I thought I would mention that :) Here are a few things:

  • Because you set max-width of the body to 1440px, the whole design is not centered on my screen.

  • I think you could modify your media query so the design goes from the column to grid layout only when there's enough space for it. This will likely make the cards very wide, so it will be a good idea to add max-width to card styles.

  • Something is causing a horizontal scrollbar to appear, but I haven't been able to find the culprit :(

Hope this helps :)

0

Isenraf 220

@Isenraf

Posted

@AgataLiberska Thanks for your feedback. I have set the body width to 1440px as mentioned in the specification.

0

@AgataLiberska

Posted

@Isenraf the screen sizes for the design are provided to help give an idea of how elements are sized and positioned in the viewport, you should definitely aim at making the design work on all screen sizes :)

0
Isenraf 220

@Isenraf

Posted

@AgataLiberska ok

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