Media Query problem - website not resizing on mobile devices
I'm trying to make my personal site responsive to mobile devices and have added media queries to my CSS, see below:
While this works on the desktop browser when I resize it manually it doesn't when viewed on a phone/tablet?Code:/*===================================================== Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { .wrap {max-width: 100%} } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .wrap {max-width: 100%} } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .wrap {max-width: 100%} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { .wrap {max-width: 100%} h1 {font-size: 200%;} h2 {font-size: 130%;} aside {padding: 0 7px 0; float: left;} article{clear:both;} } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { .wrap {max-width: 100%;} h1 {font-size: 170%;} h2 {font-size: 120%;} nav {text-align: center; position:absolute; top: 132px; left: 7px; right: 20px;} nav a {width: 31%; padding: 0.5em 0; border-bottom: 1px solid white;} header {clear: both;} aside {display: none;} article{padding: 3.8em 8px 0;} footer {height: 270px;} footer section.links {width: 87%;} footer section.links img{float: left;} } /* OLDER Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 319px) { .wrap {min-width: 319px; max-width: 100%} }
This is the website minus the gallery images:
http://www.domcoleman.co.uk/responsive/
So, to recap, when on my desktop and I resize the browser the content squashes up as required, but when loaded onto a phone/tablet it loads the whole 'desktop' version of the page. If you need to see more of the CSS or <head> in the HTML let me know.
Many thanks,
Dom
If there is a delay in my repsonse, it prob 'cos I'm off line or gone to bed...
Reply With Quote
Bookmarks