Despite my efforts to make this image responsive and scale properly, I have not been successful. No matter what code I try, the image remains at its default size. I have tested it by resizing the browser and using a mobile phone emulator, but it stays the same size.
Here is how I have structured the HTML:
<section class="image">
<div>
<img class="info" src="jewelry-large-info.png">
</div>
</section>
And here is the CSS I have used:
.image {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.info {
height: auto;
width: auto;
max-width: 1500px;
max-height: 666px;
}
If anyone has any suggestions or solutions, I would greatly appreciate it. It's possible that I may have overlooked something simple.