Design comparison
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
- @vahid2072Posted 12 months ago
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
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