Submitted about 2 months ago

Responsive Product Preview Card Component | HTML/CSS

Mariana Araripe•110

@marianaararipe

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

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

My biggest challenge was making the product image stay perfectly square on smaller screens while keeping the layout proportional and visually appealing. After some research, I discovered the CSS "aspect-ratio" property, which allows you to define the relationship between width and height of an element. By using "aspect-ratio: 1 / 1", I was able to make the image automatically adapt and remain a perfect square on mobile — without relying on "hacks" like fixed heights or padding tricks.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Mariana Araripe's solution.

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