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

Responsive Preview Card Component

Juan J 30

@JuanJefry23

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@kassahunAmdie

Posted

hi Juan, A good attempt on the challenge. You have the structure down. But few things could make a great change. I noticed you have set a dimension or restriction on the container and also on the image you have set width. I have learned these will cause a lot of issues on your end result. For your image set the display as block and set a max-width to 100%.

I also see you have used position: absolute on your container-card. I didn't see the need for this. Over all please watch Kevin Powell's responsive web design guide. I myself learned a lot. The biggest lesson was the browser will by default make your page responsive. We usually make it unresponsive by injecting unnecessary CSS. I hope this helps.

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