Skip to content
Submitted over 3 years ago

Responsive 3 Column Preview Card Component

Anmol Kapil•655
@anmolkapil
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

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

  • Patrick•14,265
    @palgrammingPosted over 3 years ago

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

    Marked as helpful
    1
    Anmol Kapil•655
    @anmolkapilPosted over 3 years ago

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

    0
    Patrick•14,265
    @palgrammingPosted over 3 years ago

    @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
    Anmol Kapil•655
    @anmolkapilPosted over 3 years ago

    @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

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