Starting in portrait on my iPhone 4, the fluid grid layout page does not resize when I turn to landscape. After I refresh / resize to fit the page on landscape and then turn the iPhone to portrait, the page resizes just fine. Everything seems to be working just fine on the desktop, ignoring IE. Could it be my media query tags?
If anyone knows a solution, it would be much appreciated. Thanks.
Here is my test page: http://www.bedroomandmore.com/1_b_fluidGrid.html
Here are my media query tags (the first set of rules does not have the media query tag and becomes the default):
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
@media only screen and (min-width: 481px) {
@media only screen and (min-width: 769px) {
Here is most of my media query CSS:
@charset "UTF-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/* Mobile Layout: 480px and below.(smartphone portrait) */
.gridContainer {
width: 95.4184%;
padding-left: 0.5907%;
padding-right: 0.5907%;
}
#header {
clear: both;
float: left;
display: block;
margin-left: 0%;
width: 72%;
max-height: 0%;
display: -moz-box; /* Firefox */
display: -webkit-box; /* Safari and Chrome */
display: box;
border: none;
top: auto;
padding-top: 0.25em;
}
#menuHorizontal {
clear: both;
float: left;
width: 118%;
height:100%;
margin-left: auto;
position:relative;
top:-1em;
display: block;
}
#slides {
clear: both;
float: left;
margin-left: 0.1em;
width: 119%;
position: relative;
top: -1em;
display: block;
}
/*Slides container: Important: Use position:relative; with top:-1em; together to position div.
Set the width of your slides container
Set to display: none to prevent content flash*/
.slides_container {
clear: both;
width: 100%;
display: block;
}
/*Each slide: Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display: block for original setting
slide_container is container size
slides_container div set the size of the image inside--adjust to fit image in it so it is not cropped*/
.slides_container div {
clear: both;
width: 69%;
display: block;
}
}
/* Mobile Layout: 480px. (smartphone landscape)
Inherits styles from Mobile Layout 480px.
Set to clear:none; to allow div to shift up
Or set to clear:both; to take a whole row of the screen*/
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
.gridContainer {
width: 95.4184%;
padding-left: 0.7907%;
padding-right: 0.7907%;
}
#header {
clear:both;
float: left;
display: block;
margin-left: auto;
width:100%;
display: -moz-box; /* Firefox */
display: -webkit-box; /* Safari and Chrome */
display: box;
border: none;
}
#menuHorizontal {
clear:both;
float: left;
width: 110%;
margin-left:auto;
display: block;
}
#slides {
clear:both;
float: left;
margin-left: 0%;
width: 68%;
display: block;
}
/*Slides container: Important:
Set the width of your slides container
Set to display: none to prevent content flash*/
.slides_container {
clear:both;
float: left;
width: 100%;
display: block;
}
/*Each slide: Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display: block for original setting*/
.slides_container div {
clear:both;
width:69%;
display: block;
}
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.
Set to clear:none; to allow div to shift up
Or set to clear:both; to take a whole row of the screen*/
@media only screen and (min-width: 481px) {
.gridContainer {
width: 95.9456%;
padding-left: 0.5271%;
padding-right: 0.5271%;
}
#header {
clear:both;
float: left;
display: block;
margin-left: auto;
width: 100%;
display: -moz-box; /* Firefox */
display: -webkit-box; /* Safari and Chrome */
display: box;
border: none;
}
#menuHorizontal {
clear:both;
float: left;
margin-left:auto;
display: block;
}
#slides {
clear:both;
float: left;
margin-left: 0%;
width: 70%;
display: block;
}
/*Slides container: Important:
Set the width of your slides container
Set to display: none to prevent content flash*/
.slides_container {
clear:both;
float: left;
width: 100%;
display: block;
}
/*Each slide: Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display: block for original setting*/
.slides_container div {
width: 100%;
display: block;
}
}
