CODEWITHSUNDEEP
cssmedia-queries
Emilien
Emilien

Reputation: 2761

@media screen doesn't work

@media screen and (min-width: 501px) and (max-width: 769px)

The code between this media query is taken even if the size of the window is 1920px !

Look at this code :

.row-contact{
    .col-xs-12:first-child {
        margin-top: 0;
    }
}

@media screen and (min-width: 501px) and (max-width: 769px){
    .row-contact {
        padding: 0 !important;

        .col-xs-12:first-child {
            margin-top: 12%;
        }
    }
}

In full screen I have margin-top: 12%, however, it must be margin-top: 0 !

Why this isn't working ?

EDIT I found the solution ! I closed the media query before writing the SCSS instruction

Thanks for your help ! :D

Upvotes: 0

Views: 386

Answers (2)

Satyam Dhameliya
Satyam Dhameliya

Reputation: 1

I think you use nested css so that your code not work

    @media screen and (min-width: 501px) and (max-width: 769px){
    .row-contact {
        padding: 0 !important;
    }
    .col-xs-12:first-child {
        margin-top: 12%;
    }
}

Try to use above code Thanks :)

Upvotes: 0

LKG
LKG

Reputation: 4192

.row-contact{
    .col-xs-12:first-child {
        margin-top: 0;
    }
}

@media screen and (min-width: 501px) and (max-width: 769px){
    .row-contact {
        padding: 0 !important;
    }
     .col-xs-12:first-child {
          margin-top: 12%;
     }
}

Try this way because nesting is not working if you are not using LESS or SCSS

Upvotes: 1

Related Questions