james james - 3 months ago 6x
CSS Question

CSS width: as it was originally set by bootstrap?

I'm using Bootstrap with lots of media queries for responsive design. For a given div, I start using bootstrap's

to set width and margin:

<div class="col-xs-6 col-xs-offset-3" id="special">

But in certain cases and in certain cases only, I want to further add my own styling, as below:

@media only screen and (orientation:landscape) and (min-width : 320px) {
.special {

@media only screen and (orientation:landscape) and (min-width : 768px) {
.special {
width:"go back to using bootstrap col";

My problem as you can see from the above, is that as the media query builds, on the next size up, I'm not sure how to say... go back to using the bootstrap col. I tried
but those did not work


It generally a bad idea to alter dimension when you are using a grid system, because that's all grid system is build for.

Simply by reading your example is a little unclear because there are couple conditions in your code:

  1. width > 320
  2. width > 768
  3. width between 320 ~ 768
  4. orientation is landscape
  5. orientation is not landscape

However, media query is and additional expression for your selector, it will use what you already have if YOU DO NOT SPECIFY the OTHERWISE. so for example

/* from bootstrap */
.col-xs-6 {
  width: 10 % ;

/* your override */
@media only screen and(orientation: landscape) and(max-width: 768px) {
  #special {
    width: 40%;

By applying this, div will have width of 40% when device is landscape + width is less then 768px (sorry i can't tell your intention by reading your code), it use col-xs-6 or col-xs-offset-3 otherwise.