Weird behavior of Media Queries

Question

I have spent several hours trying to figure out what is the problem .. I have no idea what is wrong with media queries.
How css files are included in index.html

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Custom styles CSS -->
  <link href="css/main.css" rel="stylesheet" media="screen">
  <!-- Responsive CSS -->
  <link href="css/responsive.css" rel="stylesheet">

The part of my main.css file

#home {
    font-size : 1.5rem;
    background: url(../images/home2.jpg) no-repeat center center;
    -webkit-background-attachment: fixed;
    background-attachment: fixed;
    background-color: @backgroundHomeColor;
    background-size: cover;
    padding: 0;
    position: relative;
    white-space: normal;
}
/* === MAIN === */
.section-padding {
    padding: 6rem 0;
}

The responsive.css file

@media only screen and (max-width:1920px) {
    .personal-info{
        padding-right:180px;
    }
}


@media only screen and (max-width : 1600px) {

}


@media only screen and (max-width : 1280px) {

}

@media only screen and (max-width : 1200px) {

    .portfolio-item{
        min-height: 150px;
    }
    .download-button a{
        margin-right: 10px;
    }

}

@media only screen and (max-width : 992px) {
    .navbar-custom .navbar-brand{
        padding: 10px 15px;
    }

    .navbar-custom .navbar-nav > li > a, 
    .navbar-custom .navbar-nav .dropdown-menu > li > a{
        font-size: 12px;
        padding: 15px;
    }

    /*about me section*/
    .biography {
        margin-top: 20px;
        margin-bottom: 45px;
    }

    /*resume*/
    .resume:before,
    .resume:after{
        left:0px;
    }
}

@media only screen and (max-width : 768px) {
    // Home intro section
    #home {
        font-size : 1.4rem;
    }
    .md-full-height {
        height: 560px !important;
    }
    // General styles
    .section-padding {
        padding: 222rem 0;
    }

    .social-icons ul{
        margin-left: 0;
    }

    .social-icons li{
        padding:0;
    }

}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    #home {
        font-size : 1.2rem;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
    #home {
        font-size : 1.0rem;
    }
}

The most problematic is @media only screen and (max-width : 768px) {

It works sometimes, sometimes not, I have no idea what is wrong.

Consider this class

#home {

It works with media 320px,480px, 992px .... but IT DOESN'T apply style for 768px media query even with !important.

One interesting thing I've noticed that if styles are not declared in main.css
like this one

.social-icons ul{
    margin-left: 0;
}

Is applied from this 768px query, but if style is declared in main.css it is not applied, but only from 768px query.

But if I move all these media queries styles to the bottom of the main.css everything works perfectly.

I have no idea what to do .. I have spent a lot of hours trying to find the solution for this 768px media query.

Answer 1

You are using double slash // for comments inside 768px media query. This is not valid in CSS where the comments must be writed like this: /* comment */

You get a CSS syntax error and the block of code is not executed.