0

This is my class:

.center-block-xs {
  // This style is given to an image. I want the image to keep
  // its original CSS (whatever the default display and margin
  // is for an image) unless the screen size fits within the 
  // media query below.
}

@media(max-width:767px) {
  .center-block-xs { 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
  }
}

Basically, what I want to do is this: If an element has the class .center-block-xs, then the CSS should be applied to the element only if the screen size is within the media query. I know I can do this:

@media(max-width:767px) {
  .color-red-xs { color: red; }
}

@media(min-width:768px){
  .color-red-xs { color: black; }
}

In which case the color is red only if the screen size is within the media query, otherwise it gets overridden with the black color. But I don't want to have to override any CSS in my case; I just want the CSS to be what it normally would be unless the screen size is within the media query. Is this possible?

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
SilentDev
  • 20,997
  • 28
  • 111
  • 214
  • 2
    Your media query doesnt even make sense. If you want it red only at a certain width, then you need to use a `min-width` / `max-width` media query. `@media (min-width: 480px) and (max-width: 767px) {};`. – Sean Stopnik Jun 07 '15 at 04:17
  • @SeanStopnik It's a Twitter Bootstrap 3 media query (mobile first approach) so if it is a mobile device (Bootstrap assume mobile devices have a max-width of 767px), then change whatever CSS needs to be changed. At least that's how I interpreted it. See here for more information: http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries – SilentDev Jun 07 '15 at 04:19
  • 1
    You realize your media query only works for one pixel, right? – Sean Stopnik Jun 07 '15 at 04:21

2 Answers2

1

What you're describing is precisely how CSS and media queries work by default. If you define a class of .center-block-xs within a media query, that definition will only be applied to elements that a) have that class, when b) the media-query rules apply. There is no need to explicitly define the alternative case(s) if you want inherited styles to be applied.

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
0

Just set the default color to what you want, such as the following:

.center-block-xs {
   color: red;
}

Then set a minimum width for the CSS change, like so:

@media(min-width: 767px) {
  .center-block-xs {
    color: black;
  }
}

when the screen hits a width of 767px, the text will change.

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
technoY2K
  • 2,442
  • 1
  • 24
  • 38