CODEWITHSUNDEEP
htmlcssmedia-queries
Rambomst
Rambomst

Reputation: 663

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.

Upvotes: 2

Views: 1429

Answers (1)

aniskhan001
aniskhan001

Reputation: 8521

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.

Upvotes: 7

Related Questions