0

I'm a little confused by the new BS and it's already set styles. I need to write some responsive styles and see that there is in the grid.scss file the large, medium, and small media queries which is where i placed all my responsive styles but as I got stuck in writing them in there... it then didn't work. Large styles appeared in the small view. Dam!

An example of my code is here:

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
//
// Note that `.col-sm-12` doesn't get floated on purpose--there's no need since
// it's full-width.

@media (min-width: $screen-sm-min) {
  .container {
    background-image: url("../images/graphics/splash-mobile.png");
    background-repeat: no-repeat;
    width: 320px;
    min-height: 653px;
    margin-top: 45px;
  }
  .splash h1 {
    margin: 0 auto;
  }
  .splash h2 {
    font-size: 21px;
  }
  .splash h3, .splash p {
    padding-left: 10px;
    padding-right: 10px;
  } 

  .form-signin {
    margin-left: 3%;
    margin-right: 3%;
  }

  .splash .btn-block {
    border-radius: 0 3px 3px 0;
    font-size: 14px;
    padding-bottom: 9px;
    padding-top: 8px;
    width: 32%;
  }

  @include make-grid-columns-float(sm);
  @include make-grid($grid-columns, sm, width);
  @include make-grid($grid-columns, sm, pull);
  @include make-grid($grid-columns, sm, push);
  @include make-grid($grid-columns, sm, offset);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
//
// Note that `.col-md-12` doesn't get floated on purpose--there's no need since
// it's full-width.

@media (min-width: $screen-md-min) {
  .container {
    background-image: url("../images/graphics/splash-tablet.png");
    background-repeat: no-repeat;
    width: $container-md;
    min-height: 605px;
    margin-top: 45px;
  }
  .splash h3, .splash p {
    padding-left: 84px;
    padding-right: 90px;
  } 
  .form-signin {
    margin-left: 13%;
    margin-right: 13%;
    margin-top: 20px;
  }

  .splash .btn-block {
    border-radius: 0 3px 3px 0;
    font-size: 16px;
    padding-bottom: 7px;
    padding-top: 8px;
    width: 25%;
  }

  @include make-grid-columns-float(md);
  @include make-grid($grid-columns, md, width);
  @include make-grid($grid-columns, md, pull);
  @include make-grid($grid-columns, md, push);
  @include make-grid($grid-columns, md, offset);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
//
// Note that `.col-lg-12` doesn't get floated on purpose--there's no need since
// it's full-width.

@media (min-width: $screen-lg-min) {
  .container {
    width: $container-lg;
    min-height: 610px;
    background-image: url("../images/graphics/splash-browser.png");
    background-repeat: no-repeat;
    margin-top: 45px;
    padding:0;
  }
  .form-signin {
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 20px;
  }
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  .splash .btn-block {
    border-radius: 0 3px 3px 0;
    font-size: 16px;
    padding-bottom: 7px;
    padding-top: 8px;
    width: 25%;
  }

  .splash h2 { margin-top: 93px; padding-right: 50px; }

  .splash h3, .splash p { padding-left: 35px; }

  .form-signin { padding-left: 35px; }

  @include make-grid-columns-float(lg);
  @include make-grid($grid-columns, lg, width);
  @include make-grid($grid-columns, lg, pull);
  @include make-grid($grid-columns, lg, push);
  @include make-grid($grid-columns, lg, offset);
}

Should I be writing my styles in here?

1 Answer 1

1

You shouldn't make the changes to the BS files.

Create a new CSS file, put there the basic media queries and include it to your page after the bootstrap CSS. That way your styles overrule the BS styles and if there's a update available for the BS you can update the BS files without a massive hassle copy-pasting your own styles.

So create ie. own-styles.css and include it after bootstrap.css

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/own-styles.css" rel="stylesheet">

Add there the media queries

/* screen-lg */

@media (max-width: 1199px) { 
    /* screen-md */
}

@media (max-width: 991px) {
    /* screen-sm */
}

@media (max-width: 767px) {
    /* screen-xs */
}

@media (max-width: 480px) {
    /* screen-xs */
}

And write your styles in their places.

1
  • Thanks mMoovs for your advice. Apr 16, 2014 at 4:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.