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 design - mobile first

@half-clutch

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


how to keep the shape of the card same for lower resolution? in my case the height increases to compensate for the text until it goes to mobile layout.

Community feedback

hao pham 745

@jerry-the-kid

Posted

At (min-width: 900px) : You can change width: 80% or more than; max-width: 900px because you set width: 60%; max-width: 900px and 900px < 60% => width will be 60% and card will be smaller by width. At mobile phone screen you can set max-width to 370px or something. And it's good to go. Sr for my poor english :))

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