I am attempting to apply some elements of responsive design to a site. My goal is to hide the right side based on screen width. I've been able to get the behavior to change on my desktop (when minimize the window) as well as my iphone. But, my andriod is still displaying the right side just like the full desktop site.
I had the max-width set to 750px, but increased it to 1000 to try and get the andriod to do something, but still not luck.
My CSS looked like this originally:
#container {
width: 980px;
text-align: left; margin: 10px auto; font-family: Arial; font-size: 1em;
}
#rightnav {
float: right; align: center; width: 300px !important; margin: 0; padding: 12px 5px 5px 5px;
}
To the CSS, I added this media query stuff:
@media all and (max-width: 1000px) {
#container {
width: 95%;
margin: 5px auto;
padding: 5px;
}
#rightnav {
display:none;}
I don't have it perfect, but on a minimized desktop screen or my iphone4, the right side doesn't display, indicating that the responsive design is working. However, on the andriod the CSS isn't responding at all.
As always, thanks in advance...
