CODEWITHSUNDEEP
cssresponsive-design
Xariez
Xariez

Reputation: 789

CSS Class inside media query not applying

I'm currently trying to make a website more responsive, and that via media queries. However, for some reason I can't get my classes to at all apply inside my media queries (or at least, that's what it seems like?).

I'm not sure if I'm doing something wrong, overlooking something, or if it's simply a sign on that I should take a break. Either way, the CSS looks as following: 

@media (max-width: 760px) {
    font-size: 56px;

    :not(.aboutUs_extra_margin) {
      margin-top: 190px !important;
    }
}

Upvotes: 2

Views: 1162

Answers (1)

IT-Girl
IT-Girl

Reputation: 498

I believe that you are missing a class that's supposed to be wrapping the styling. The styling will be applied to the class that you wrapped around the styling. Your code is supposed to look like this:

@media (max-width: 760px) {
    .className{
        font-size: 56px;
    }

    :not(.aboutUs_extra_margin) {
         margin-top: 190px !important;
    }
}

If you want all your classes to apply this styling you can add body instead. Body is the parent element of all classes.

@media (max-width: 760px) {
    body{
        font-size: 56px;
    }   
    :not(.aboutUs_extra_margin) {
         margin-top: 190px !important;
    }
}

Update:

Based on the comments below I have made a fiddle containing the media queries. One inside a parent element and one outside it.

https://jsfiddle.net/rhbsqj6z/4/

The only styling that applies is from this code:

@media (max-width: 760px) {
    body{
        background:green;
    }   
    :not(.aboutUs_extra_margin) {
         border:1px solid red;
    }
}

While you'd expect the styling below it to apply, since CSS looks at the last defined styling. Also if you would comment out the first media query, you can see that the one below will still not work:

.parent{
@media (max-width: 760px) {
    body{
        background:red;
    }   
    :not(.aboutUs_extra_margin) {
       border:1px solid blue;
    }
}

The media queries inside a parent class are not working.

Upvotes: 3

Related Questions