Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Media queries not taking effect on browser resize

Media queries not taking effect on browser resize

Problem

I'm using Media Queries to make a mobile version of a website for a client. When i resize the browser the media queries do not take effect, however they do take effect when the site is viewed on each device - i'm just curious as to why the media queries don't take effect when i resize the browser window itself i.e. Firefox.

Any input is much appreciated.

Code i'm using:

    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 720px) {
    #container {
        width: 100% !important;
        }
    }
Problem courtesy of: Nikki Mather

Solution

You didn't post an example of code, so I'm guessing: If you are using attribute: max-device-width or min-device-width, it will work only on devices with that width and will ignore the manual browser resizing.

You should change the attribute to: max-width / min-width.

@media screen and (min-width: 1024px){
  /* some CSS here */
}

Check here:

In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. device-width refers to the width of the device itself, in other words, the screen resolution of the device.

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Solution courtesy of: Aljana Polanc

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Media queries not taking effect on browser resize

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×