My website gallery is responsive to all sizes when viewed on chrome at 127.0.0.1, but once I upload it to the live domain and host, the gallery appears oversized on all mobile phones. Below is the code snippet along with the CSS that I am currently using.
* {
box-sizing: border-box;
}
img {
max-width: 100%;
vertical-align: top;
}
#gallery {
display: flex;
margin: 10px auto;
max-width: 100%;
position: relative;
padding-top: $max-img-height/$max-img-width * 100%;
}<section class="gallery">
<div class="gallery__item">
<input type="radio" id="img-1" checked name="gallery" class="selector">
<img class="gallery__img" src="images/p1.jpg" alt=""/>
</div>
<div class="gallery__item">
<input type="radio" id="img-2" name="gallery" class="selector"/>
<img class="gallery__img" src="images/p2.jpg" alt=""/>
</div>
</section>