CSS: Define Media Query Within One Class

CSS: define media query within one class

You should do like this:

@media all and (max-width: 767px) {
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

If you want to target desktop, you can use:

@media (min-width:1025px) { 
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

I just notice you're using SASS, you can do like this:

.global-container {
    margin-top: 60px;
    background-image: $image-bg;
    @media (max-width: 767px) {
        /* Your mobile styles here */
    }
    @media (min-width:1025px) {
        /* Your desktop styles here */
    } 
}

separate media queries for every class?

Having multiple media queries shouldn't impact performance. But in case your project will scale then and adding many queries will increase the size of the CSS file, which could impact site's performance.

Use CSS media query within an existing CSS class

You need media queries for that. Add your styles within this block

@media only screen and (max-device-width:480px){
    /* styles for mobile browsers smaller than 480px; (iPhone) */
}

Similarly you can also media queries within following block.

@media only screen and (device-width:768px){
    /* default iPad screens */
}

/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
}

EXAMPLE

Let us say you have following styles

.color-me {
    color : red;
}

@media only screen and (max-device-width:480px){
    .color-me {
        color : blue;
    }
}

And this is your markup

<div class="color-me">Color me</div>

Now, the color of text will be red everywhere except for devices with width less than equal to 480px.

CSS : Using same class within different media queries

max-width is the maximum width at which these styles will be shown. A screen wider than the specified number will not use the styles associated with that rule. Similarly, min-width is the minimum width at which these styles will be shown. A screen narrower than the specified number will not use the styles associated with that rule. I have changed your code with max-width now its working fine all media queries , just resize the browser

 @media ( min-width : 1200px) {  .color{    color: blue;  }}
@media ( max-width : 992px) {  .color{    color: red;  }}
@media(max-width:768px){  .color{    color: green;  }}
@media(max-width:767px) {  .color{    color: yellow;  }}

<div class="color">Wow ji</div>

Using Media Queries with Class Names to Change Website Width

Something like this?

@media (max-width: 767px) {
  .classname {
    width: 80%;
  }
}

@media (max-width: 480px) {
  .classname {
    width:100%;
  }
}

Note that the media query with the smaller max-width is set last to allow it to override the media query with the larger max-width.

See this article for more on using media queries.

CSS Class inside media query not applying

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.

---

Related Topics