Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

grid grid, bam blocks, flexbox

@KristinaHorbenko

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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.

Community feedback

P
Amneisa 100

@AmneisaOB

Posted

Well done

0

Please log in to post a comment

Log in with GitHub
Discord logo

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