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

@CaseyLawver

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 have the desktop design basically done, (its still not quite centered) but I am struggling with the mobile design. I can't figure out how to make the image shorter in height and centering the main container div. Any feedback is greatly appreciated!

Community feedback

Vahid 390

@vahid2072

Posted

Hi there, keep up the good work.

I'm no expert in frontend but you could use a div instead of img tag

<div class="image-container"></div> and use css background-image: url(); to add specified desktop or mobile image. In this case .image-container: background-image: url("images/image-product-desktop.jpg")

Now you can change image on different size, by @media only screen and (max-width: 600px) { .image-container: background-image: url("images/image-product-mobile.jpg") }

you could give it width and height and style it as you need

I hope it'll be helpful, Goodluck.

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