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

3 Columns Card CSS Only

Beygs 130

@Beygs

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


I started code recently, so I'm not sure of the quality of my code.

Feedback appreciated!

Community feedback

P
Patrick 14,325

@palgramming

Posted

Take your browser as wide as you can make it and then slowly transition it back down to mobile size and watch what happens to your card components as they transition. As the transition happens from 1440px wide to 375px then cards should never get larger on the screen

1

Beygs 130

@Beygs

Posted

@palgramming Thanks for your feedback! I did it because I wanted to have smaller margins on the sides of the cards for the mobile view, do you have some ideas about how to smooth this transition?

0
P
Patrick 14,325

@palgramming

Posted

@Beygs well you can look at my solution to compare maybe that will help

0
Beygs 130

@Beygs

Posted

I'll do that thanks!

0
Beygs 130

@Beygs

Posted

@palgramming Do you find it better now?

0
P
Patrick 14,325

@palgramming

Posted

@Beygs when the browser window is 700px wide the card is about 500px wide

you should set a max-width on the card so it does not grow bigger than the largest size in the design

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