Search code examples
htmlcssmedia-queries

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.

Solution

  • 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.