[Solved] One page on website not showing mobile CSS

[webecho]

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.

I’ve been at this for hours and simply cannot see why that page wouldn’t accept it when the others all do.

I’m sure it’s something obvious but I’m depsparate for a fresh pair of eyes in the hope they can spot what’s going on.
many thanks
webecho

[JustinF]

It works perfectly fine for me just as you described it to be. All I did was open it in latest version of Chrome went to the Web Developer extension > Resize > View Responsive Layouts. And I manually resized my browser with the same results.

Maybe others can chime in with what they’re seeing?

[webecho]

Thanks for checking Justin
Yes, works fine resizing the screen in Chrome
Doesn’t work when doing ‘Inspect Element’ and choosing mobile.
Doesn’t work on my Galaxy S5 or S3.
Just to clairify, the homepage works on everything I’ve tried it on, it’s the booking form page I’m having the issue with.

Thanks

@webecho

[webecho]

Aaaaaaand, it was simple … of course.
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />

That’s all it needed, was being imported by Google Maps to every other page except the booking form.

webecho

[Paulie_D]

user-scalable=no”

Please don’t do this….it’s very poor UX.

Some of us need to be able to scale/zoom. We’re not all blessed with perfect vision.

[Author]

Posts