CSS media query not working while shrinking browser window

I have made sure the CSS file isn't cached and that the id/class names are correct. When I shrink my browser down to a size within that range it doesn't apply the CSS.

This is the CSS code:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{
    #body2 .content
    {
        max-width: 690px;
    }

    #navWaypoint #header
    {
        width: 690px;
    }
}

I haven't experienced this issue before.

Answers


If you are shrinking your browser windows to evaluate your code here is your answer.

min-device-width and max-device-width refers to display resolution. While min-width and max-width refers to the size of the browser window.

Use min-width and max-width instead of min-device-width and max-device-width and hopefully you will get what you want.


Need Your Help

Uncaught TypeError: Cannot call method 'format' of undefined

extjs extjs3

I am using extjs version 3.4 and I am getting one error in this line: