Media Rules Not Getting Applied to Mobile Browser

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; 

Syndicate content