CODEWITHSUNDEEP
cssmobileresponsive-design
Elijah Murray
Elijah Murray

Reputation: 2172

viewport device width, not working

I set up

meta name="viewport" content="width=device-width"

so that when on a mobile device, the site http://www.myscholly.com/iphone.php will adapt. I also make my containing div width=100%. This works when viewing in a normal web browser with a small viewport (i.e. shrinking the browser window), but it doesn't work on my iphone simulator.

I know the issue is CSS, but I disabled margins, paddings, and basically stripped everything but still have the issue. If you look at the site on mobile, the containing element does not have a width of 100%!

Upvotes: 3

Views: 4404

Answers (2)

Akki619
Akki619

Reputation: 2432

Put the meta tag on the first place inside head tag. It might not be reaching to your meta tag.

In early 2011, the W3C decided to allow the character encoding declaration be within the first 1024 bytes instead of the first 512 bytes, so that browsers can give more leeway before buffering the page content.

See the below link for more information.

Document header optimization

Upvotes: 0

Stuart Robson
Stuart Robson

Reputation: 1149

In your style.css and in the html the div 'container' is a class = .container but in your max-width media query in the HTML file you're targeting it as a id = #container.

Upvotes: 1

Related Questions