I have gone through several other discussions related to this issue, but none of the suggested solutions are working for me. Even with max-width: 100% and height: auto, the images remain unresponsive. They appear fine on browsers like IE, FF, and Chrome on desktop, but they do not scale properly on mobile devices, including Chrome for Android 10 and Safari on iOS 13. I have reached the limit of my knowledge on this matter and require assistance.
<div class="image">
<img src="images/last-supper.png" alt="The Last Supper by Leonardo da Vinci">
</div>
.image {
padding-top: 2.5em;
width: 100%;
max-width: 600px;
height: auto;
}
Even after attempting width: 100% height:auto, and max-width: 600px, as well as removing shrink-to-fit=no from the <meta> tag, nothing seems to be effective. I have tried applying these changes both in an external CSS stylesheet and inline HTML, without any success. Can someone please guide me through this process and help identify what may be causing the issue?
For the complete code, visit the GitHub repository: https://github.com/ErichMB/the-christian-gallery
To view the deployment on Gh-pages, follow this link: