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

@AlazarG19

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


my question is my browser doesnt display a 1440 px version of the site when i build it why is that

Community feedback

Liam 150

@liamchivers23

Posted

Hi, Alazar. Your Solution, While good lacks responsiveness. Through from 1000px to 375px it looks slightly squashed. Maybe try and change the flex-direction of your project to column so that it displays as it would in the mobile view.

Although this is just my opinion and you dont have to take my advice,

Liam. :)

Marked as helpful

0

@AlazarG19

Posted

@liamchivers23 i didnt fix that yet thanks for the comment but idk why but my page is different in edge and firefox and it always messes with my margin and padding to the body or main

0
Liam 150

@liamchivers23

Posted

@AlazarG19 i think that is because you are using px with margin and padding? If you use 'percentage' or 'rem' units your design will be more responsive :)

0

@AlazarG19

Posted

@liamchivers23 how about vw and vh

0
Liam 150

@liamchivers23

Posted

@AlazarG19

im not too sure about vw and vh, normally i use the "max-width" selector on css for width

0

@mohit421

Posted

Hi , you can use margin or padding bottom and for mobile use padding between card so that it look better. Hope , you find it helpful !

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