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!
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.
Hello Everyone, Its my third challenge from frontend mentor, I have added reset styles and variables and utility classes this time, so this is some improvement from the last two challenges. But please feel to add some feedbacks. Thanks :)
