Skip to content
Submitted about 1 month ago

Responsive Product Preview Page using CSS Grid

glowri57•130
@glowri57
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 am proud of being able to place the desktop image for the desktop view and the mobile image for the mobile view without using two `` tags.

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

My major challenge was getting the image on the mobile view to fit the page so I had to create more @mediaquery properties to adjust the images.

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

I would need help with the following:

  • getting a better way to fit images in the container for the mobile view
  • Get the image to remain the same instead of shrinking so that it looks the same on iPad and tablet views.

Community feedback

  • Huy Phan•2,060
    @huyphan2210Posted about 1 month ago

    Hi, @glowri57

    I saw your solution and have some thoughts:

    • On tablet view, your image shrinks to the point where it becomes invisible. This might be due to the width: 50% set on the .price-section. The .right class isn’t adjusting its width because its content (text) has a fixed font-size and you’ve set its width to 80%, which might not be necessary. Meanwhile, the .left class’s width depends on the parent .price-section. Since the .right class doesn't change width, and .price-section is shrinking due to the constraints mentioned, the .left class is forced to shrink to fit its parent.
    • To resolve this, consider increasing the width of .price-section or adding a min-width to the .left class.

    Hope this helps!

    Marked as helpful
    1
    glowri57•130
    @glowri57Posted about 1 month ago

    Hi @huyphan2210 Thanks for the feedback 😃. It was very helpful.

    1

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