Media Rules Not Getting Applied to Mobile Browser

<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">&times; <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">&times; <span class="close-note">(click anywhere)</span></span>
		</div>
	</a>
 
</div>