FordCorsair
02-06-2013, 08:49 PM
I'm trying to make my personal site responsive to mobile devices and have added media queries to my CSS, see below:
/*=====================================================
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%}
}
While this works on the desktop browser when I resize it manually it doesn't when viewed on a phone/tablet?
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...
/*=====================================================
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%}
}
While this works on the desktop browser when I resize it manually it doesn't when viewed on a phone/tablet?
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...