Skip to content
Submitted about 1 month ago

Responsive landing page for Product Preview Card.

vijay1maroju•30
@vijay1maroju
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I feel good that I started using CSS grid and flexbox now.

What challenges did you encounter, and how did you overcome them?

I faced challenges with media queries, I tried my best to make the mobile version look better, but I don't know if it is as good, I think I did quite good in desktop version.

What specific areas of your project would you like help with?

I would like to improve with media queries, dealing with image resizing and image replacement in media queries.

Community feedback

  • Juan Trujillo•180
    @jdtb4Posted about 1 month ago

    Hi, first of all congratulations, you finished the challenge.

    • Change the grid-template to grid-template-columns: repeat(2, 1fr); that would fix the error in the grid.
    • Use margin: 10% auto; to center the card.
    • Add border: none in the button to remove the border black.
    • border-radius: 15px; will round the corners of the card.
    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