http://www.teamassociated.com/downloads/webapp/fluid.html
If you test the above layout in various browsers and the iPhone, you’ll see the layout works fine. But it doesn’t resize in IE. At 800px, the left column should disappear and the right column should move under the middle column.
Here’s the CSS for the 800px switcharoo:
/* -------------------- DESKTOP SMALLER SCREEN ----------- */
@media screen
and (min-device-width : 400px)
and (max-width : 800px) {
body {
text-align: center;
min-width: 400px;
}
#wrapper {
width: 800px;
}
p {
font-family: Helvetica, Arial, sans-serif; /* prevent type from getting tiny */
font-size: 100%;
}
#header {
margin-bottom:0;
}
#col1
{
visibility:hidden; height:1px;
}
#col2
{
clear:both;
width: 100%;
margin-bottom: 10px;
margin-left:0;
border-right: 0;
}
#col3
{
clear:both;
width: 100%;
margin-bottom: 10px;
margin-left:0;
}
}
What are we supposed to do to get IE to understand the @media queries? I’ve searched Google and read many pages, incorporated several techniques, and none of them worked for me.