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; 

Collapse Icon Not Appearing

On my website at Dealmazing

The collapse bar for my top nav is working, but the icon with the three lines has somehow disappeared.

I'm using bootstrap and recently compressed some of my CSS so not sure if something happened in the process.

I've included an image to show what I mean---this is in mobile

https://ibb.co/goXktn

<BODY> width on mobile

body {	
	margin: auto;
	padding-bottom:5%;
	padding-left:0%;
	padding-right:0%;
	padding-top:5%;
	background-color:#FAE8B3;	 
	font-size: 16px;
	color: #FF9554;	
	font-weight:bold;
	max-width: 100%; 	
	width: auto;
}

For some reason that I can't work out the above has a horizontal scroll bar when viewing on a mobile. Can anyone see why please. Thanks

One page on website not showing mobile CSS

Test site is http://webecho.net.au/swatch/

My problem is with the mobile css.

To make it obvious I have added a h2 saying "should be orange on mobile"
On the homepage, on a mobile it shows correctly in orange.

On the booking form page http://webecho.net.au/swatch/booking-form.php - it doesn't!

Basically, I've been trying to just have the form go down the page on a mobile not be split into the left and right sides.

The simple test was just to see if that page was acccepting the mobile css which it isn't.

if Mobile, then mobile.css; if not, then regular.css

I am trying to use the same webpage, but with a different CSS if the user is viewing it with a mobile device as opposed to a computer. I have the following in a CSS called mobile-choose, but it is not working...any thoughts?

/* Phone & Tablet */
@import url("mobile.css") only screen and (max-width:768px);
 
/* Desktop */
@import url("regular.css") only screen and (min-width:769px);

Syndicate content