Greetings,
I am in the process of retrofitting an old site to be responsive, and
have thus added a css file with media queries.
I have four different media queries in the file:
@media screen and (max-width: 960px) {}
@media screen and (max-width: 750px) {}
@media screen and (max-width: 600px) {}
@media screen and (max-width: 400px) {}
In firefox, all four are interpreted as intended. In safari, opera and
chrome, they are unfortunately not, and neither on the android phone
browser.
On the page:
http://ursuladevelop.operartists.com/contact
The left sidebar:
#main .region-sidebar-first
is displayed even with a narrow screen, only the first case
(max-width: 960px) is recognized and the page rendered accordingly.
For a narrow screen width, the css statement display:none is supposed
to be executed.
I am obviously not understanding something. Could somebody give me a pointer?
This is a retrofit, and I don't want to go through the trouble of
rebuilding the theme properly (media first, etc).
All help is appreciated! Ursula
(and I know that the menu is not quite right either, work in progress ...)
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
