Skip to content
Submitted over 1 year ago

grid grid, bam blocks, flexbox

LVL 2
@KristinaHorbenko
A solution to the Product preview card component challenge

Solution retrospective


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

During the layout process, I encountered difficulties with the images. Initially, I struggled to set up the images so that they would rearrange depending on the screen, whether it was for the desktop or mobile version. Later, once I figured it out, I needed to remove the padding for the images. When reviewing my images on different screens, I noticed that the desktop version was not behaving correctly. I spent a long time searching for a solution, and after applying the following properties: display: block; max-width: 100%; height: 100%; object-fit: cover;, everything worked correctly.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Khrystyna Horbenko’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