CSS: define media query within one class [closed]

Answer 1

In plain CSS, the answer is no. You can't. Media queries should always be an outer shell, encasing the inside to be applied under that condition.

In SASS and LESS, however, it's fully valid. Any converter that supports nested curly brackets should be able to move the media query to the outside, therefore allowing CSS to work as said above. (You can check the output CSS after compiling sass/less file and see them do it.)

So, if you have something like this:

body {
    background:green;
    @media (min-width:1000px) {background:red;}
}

The screen will be green in CSS (because it ignores that weird @media thing inside body style definition block) and red in SASS/LESS (because it gets what you'd actually like to see).

To be exact, preprocessors will understand the snippet above as:

body {
  background: green;
}
@media (min-width: 1000px) {
  body {
    background: red;
  }
}

Answer 2

It works:

.column-1-3 {
  width: 33.3333%;
  @media (max-width: 600px) {
    width: 100%;
  }
}

http://css-tricks.com/media-queries-sass-3-2-and-codekit/

Answer 3

You definitely have to apply some sort of multiple media queries. Code is not magic, and CSS requires specific paramaters for those sorts of queries.

You could use JS, but that is not recommended based on your use case.

Here is a CSS solution

@media all and (minmax-width: 0px) and (min-width: 320px), (max-width: 320px) 
    { Insert Code };
}'

Answer 4

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 */
    } 
}