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 product card

Redha 90

@med-redha

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


it is a goood way to further strenthen the basics of responsiveness and remind the mind of basics of html and css

Community feedback

S MD suleman 3,530

@sulemaan7070

Posted

hey @med-redha😄, congratulations on completing the challenge.. here are a few tips to improve the site and code...

1.On the mobile version you can display a separate image which you will find in the images -folder ... you can use the picture for responsively changing the image like this

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

2.you should use min-height:100vh instead of height:100vh;...

3.you can remove the border around the button if it wasn't intentional...

4.you can increase font-weight for the price text... let me know if you need any help happy coding🔥🔥

Marked as helpful

1

Redha 90

@med-redha

Posted

hey @sulemaan7070 thank you for the advices i ll take them into consediration, i forgot that i have 2 pics one for mobile and one for desktop lol hence why i just made it work using css lol. thanx again for your feedback.

1

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