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

Access applet methods via javascript in IE7

java javascript internet-explorer-7 applet

I've got an applet that runs fine in firefox, however in ie8 (and ie7 I think), the javascript doesn't seem to be able to access the applets methods.

javascript .hide direction change

javascript jquery hide

With jQuery there is the hide() function.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.