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 preview card challenge

Lauryne 260

@lauryne921

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


I still don't know how to make a good responsive, so I have different questions :

  1. How to bring a different image when it's on mobile ? I used in CSS (background-image: url();) but it didn't work.
  2. The space at the bottom of the text is very big when it comes to responsive so how do you make it smaller ?

Community feedback

dev-eli 100

@dev-eli

Posted

You can use the CSS property "content" to change the src of the image like:

img { content: url(); }

This is probably the simplest way. If you use background-image:url() you also have to specify the width and height of the image in the same selector like:

.img_container { background-image: url(); width: 300px; height: 300px; }

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