Smartphone Responsive Media Query Broken

Get Started
1

I’m trying to use media queries for various sizes. I want a default size and then resize the design based on iPad and smartphone designs. This works except my smartphone media query. When I resize my browser everything works except the smartphone layout. Can you tell me what I’m doing wrong here?


/* =============================================================================
   Grid
   ========================================================================== */

#main {background-color: green;}
img{width:100%;}
/* default grid size based off of 978px*/
.container { width: 978px; margin: 0px auto; }

.container .row { height: 1%; }
.container .row-end { clear: both; font: 1px/1px sans-serif; height: 1px; overflow: hidden; }

.container .col1, div.col2, div.col3, div.col4, div.col5, div.col6, div.col7, div.col8, div.col9, div.col10, div.col11, div.col12 { float: left; margin-left: 30px; }
.container .col1:first-child, div.col2:first-child, div.col3:first-child, div.col4:first-child, div.col5:first-child, div.col6:first-child, div.col7:first-child, div.col8:first-child, div.col9:first-child, div.col10:first-child, div.col11:first-child, div.col12:first-child { margin-left: 0px; }
.container .col1 { width: 54px; }
.container .col2 { width: 138px; }
.container .col3 { width: 222px; }
.container .col4 { width: 306px; }
.container .col5 { width: 390px; }
.container .col6 { width: 474px; }
.container .col7 { width: 558px; }
.container .col8 { width: 642px; }
.container .col9 { width: 726px; }
.container .col10 { width: 810px; }
.container .col11 { width: 894px; }
.container .col12 { width: 978px; }


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	#main {background-color: yellow; color: red;}
	.container { width: 748px; margin: 0px auto; }

	.container .row { height: 1%; }
	.container .row-end { clear: both; font: 1px/1px sans-serif; height: 1px; overflow: hidden; }

	.container .col1, div.col2, div.col3, div.col4, div.col5, div.col6, div.col7, div.col8, div.col9, div.col10, div.col11, div.col12 { float: left; margin-left: 20px; }
	.container .col1:first-child, div.col2:first-child, div.col3:first-child, div.col4:first-child, div.col5:first-child, div.col6:first-child, div.col7:first-child, div.col8:first-child, div.col9:first-child, div.col10:first-child, div.col11:first-child, div.col12:first-child { margin-left: 0px; }
	.container .col1 { width: 44px; }
	.container .col2 { width: 108px; }
	.container .col3 { width: 172px; }
	.container .col4 { width: 236px; }
	.container .col5 { width: 300px; }
	.container .col6 { width: 364px; }
	.container .col7 { width: 428px; }
	.container .col8 { width: 492px; }
	.container .col9 { width: 556px; }
	.container .col10 { width: 620px; }
	.container .col11 { width: 684px; }
	.container .col12 { width: 748px; }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {

	#main {background-color: red; color: #fff;}
	.container  { width: 300px; margin: 0px auto; }

	.container .row { height: 1%; }
	.container .row-end { clear: both; font: 1px/1px sans-serif; height: 1px; overflow: hidden; }

	.container .col1, div.col2, div.col3, div.col4, div.col5, div.col6, div.col7, div.col8 { float: left; margin-left: 12px; }
	.container .col1:first-child, div.col2:first-child, div.col3:first-child, div.col4:first-child, div.col5:first-child, div.col6:first-child, div.col7:first-child, div.col8:first-child { margin-left: 0px; }
	.container .col1 { width: 27px; }
	.container .col2 { width: 66px; }
	.container .col3 { width: 105px; }
	.container .col4 { width: 144px; }
	.container .col5 { width: 183px; }
	.container .col6 { width: 222px; }
	.container .col7 { width: 261px; }
	.container .col8 { width: 300px; }
}
2

You currently have

@media only screen and ([COLOR="#0000FF"]min-width[/COLOR]: 320px) and ([COLOR="#0000FF"]max-width[/COLOR]: 480px) { ... }

but change that to

@media only screen and ([COLOR="#FF0000"]min-device-width[/COLOR]: 320px) and ([COLOR="#FF0000"]max-device-width[/COLOR]: 480px) { ... }

That should fix it. :slight_smile:

3

Let me back up, so when I’m using a browser on my desktop and I’m resizing the browser window everything responds correctly until I get to the smartphone size and that’s where it reverts to the default instead of resizing down to the that a smartphone would require. This is a bit new to me.

When I added the device to the max and min width I’m still not able to see it apply the styles to the size for smartphones when I resize my desktop browser. I’ve seen on other websites where by using media queries similar to what I have you can see the mobile layout when you resize the browser window. This is what has me stumped.

4

Hm, the styles you posted should work on a desktop but probably won’t work on a smartphone, so as I understand it, you need different rules for both. Did you test your styles on an actual smartphone?

Are you able to provide a live link to what you have?

Some browsers (like Firefox) won’t let you reduce the screen width below about 600px anyhow. Opera allows you to go as narrow as you like, though.

5

That’s really good to know about the minimum browser width. I think my biggest problem is the media queries. Seems like I can’t figure those out correctly. When I went to the A-List Apart article on responsive web design it would resize down to a smartphone size.

I’m playing around with the code today on an iPad and iPhone. If I run into more problems I’m sure I’ll be back.