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 3 Column Preview Card Component

@anmolkapil

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


Hello Everyone 👋 I tried making this component as fast as possible with Stopwatch. I finished in approx 30 minutes.

Please check and give your feedbacks!

I added a subtle landing animation and simple button hover effects.

Community feedback

P
Patrick 14,285

@palgramming

Posted

Change your media query to 945px and you will have a great result

Marked as helpful

1

@anmolkapil

Posted

@palgramming Thank you for your advice. Can you please suggest me good practices for making responsive sites. Like how do I select breakpoints.

0
P
Patrick 14,285

@palgramming

Posted

@anmolkapil The breakpoints are going to totally depend on the design you can find guides online but I do not find them much use the key to make your browser as narrow as it will go and then slowly transition it to as wide as it will go and then watch every element and how they change and interact with each other as the page widens

1

@anmolkapil

Posted

@palgramming Thanks! I used to do the same thing. Then I started using fixed values (like for tablet, mobile, etc.)

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