Media Queries won't work when I exit chrome responsive inspector and resize the page

Question

This is the css media query in question .... I worked on the media queries while inspecting the page and using Chrome's responsive selection. Everything looks really nice when I have the inspector open, but when I close the inspector and resize the page to something below 480px it doesn't hold any of the media queries that were previously working. Any suggestions on why this might be happening?

I tried to view page source and refresh the css file manually.

HTML Head and then CSS

<head>
    <title>company name here</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville" 
    rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?
    family=Josefin+Sans|Libre+Baskerville" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?
    family=Cinzel|Josefin+Sans|Libre+Baskerville" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?
    family=Cinzel|Josefin+Sans|Libre+Baskerville|Yellowtail" 
    rel="stylesheet">
    <link rel="stylesheet" href="css/home.css">
    <script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>      

@media only screen and (max-device-width: 480px) 
{
.logoContainer
{
   height: 50px;
   width: 30%;
   font-size: 1em;

}   

#headerBoxRight
{
    margin-right: 5%;
}

#bannerPictures
{
    width: 100%;
}

.wantItGone
{
    width: 50%;
    font-size: 2.1em;
    float: left;
    margin-left: -30px;
}

.gotYouCovered
{
    width: 40%;
    margin-left: -160px;
}

.aboutSection
{
    height: 250px;
}
.carboneauPicture
{
    width: 38%;
    height: 160px;
    margin-left: 10px;
    margin-top: 40px;
}

.aboutUs
{
     height: 200px;
    padding: 1%;
    margin-top: 20px;
}
/* H3 inside of about us section */
body > div.aboutSection > div.aboutUs > h3
{
    margin-top: 1%;
    margin-bottom: 1%;
}

.servicesOfferedHeader
{
    height: 100px;
    width: 42%;
    text-align: center;
}

.servicesMenuList
{
    margin-right: 100px;
}

.servicesOfferedBox
{
    clear: left;
    width: 90%;
}

#footer
{
    width: 100%;
    height: 200px;
    clear:both;
}

.wantItGoneFooter
{
    font-size: 1.4em;
    margin-left: 5%;
}

.gotYouCoveredFooter
{
    width: 40%;
    margin-left: 22%;
    font-size: .7em;
    margin-top: 28%;
}

#contactContainer
{
    height: 180px;
}

.logoContainerFooter
{
    margin-left: 0px;
    margin-top: 50px;
    height: 10%;
    font-size: .6em;
}

.emailUs
{
    font-size: .5em;
    margin-left: 25%;
    float: left;
}

}

dippas · Accepted Answer · 2017-06-03T18:25:55.323

Replace max-device-width for max-width, min/max-device-width is already deprecated

Deprecated

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

You can see more info about the difference between min/max-width and min/max-device-width in this answer, and you'll find out that it works when the chrome inspector is ON because it emulates the device type - in this case grid-based, browser can't do that.

Media Queries won't work when I exit chrome responsive inspector and resize the page

1 Answers1