Thu, 2019-09-05 22:01
If i shrink a desktop browser width to less than 600px, then my media rule is getting applied.
But chrome/android browser is only getting the default style, not the mobile style.
Any ideas?
live:
https://bayviewboom.org/prototest.html
<div class="dy-simple-photo-gallery"> <style scoped> .caption-thumb { font-size: 12px; text-align: center; word-wrap: break-word; width: 90% } .caption-light { color: white; font-family: arial; text-align: center; word-wrap: break-word; font-size: 20px; } .close-note { font-size: 10px; color: yellow; vertical-align: middle; } .img-a { height: 170px; display: inline-block; padding: 1px; } .lightbox { position: fixed; z-index: 999; height: 0; overflow: hidden; width: 100%; overflow: hidden; text-align: center; top: 0; left: 0; background: black; opacity: 0; } .lightbox:target { outline: none; height: 100%; opacity: 1 !important; } .lightbox img { width: 90%; height: 85%; object-fit: contain; margin-top: 2%; opacity: 0; } .lightbox:target img { opacity: 1; } @media only screen and (max-width: 600px) { .close-note { font-size: 50px; } .caption-light { font-size: 50px; } } </style> <a class="img-a" href="#040.spacer-1.png"> <img class="light-thumb" id="thumb-040.spacer-1.png" src="/data/thumbs/protolabs-r2/thumbnail.040.spacer-1.png"> <div class="caption-thumb">040.spacer-1.png</div> </img> </a> <a href="#thumb-040.spacer-1.png"> <div class="lightbox" id="040.spacer-1.png"> <img src="/data/uploads/protolabs-r2/040.spacer-1.png" /> <div class="caption-light">040.spacer-1.png</div> <span class="close-X">× <span class="close-note">(click anywhere)</span></span> </div> </a> <a class="img-a" href="#050.spacer-2.jpg"> <img class="light-thumb" id="thumb-050.spacer-2.jpg" src="/data/thumbs/protolabs-r2/thumbnail.050.spacer-2.jpg"> <div class="caption-thumb">050.spacer-2.jpg</div> </img> </a> <a href="#thumb-050.spacer-2.jpg"> <div class="lightbox" id="050.spacer-2.jpg"> <img src="/data/uploads/protolabs-r2/050.spacer-2.jpg" /> <div class="caption-light">050.spacer-2.jpg</div> <span class="close-X">× <span class="close-note">(click anywhere)</span></span> </div> </a> </div>