CODEWITHSUNDEEP
csstwitter-bootstrap
Ecko
Ecko

Reputation: 191

Want to push a column over only when screen size is xs

I'm working on a template in bootstrap and am having trouble when it comes to xs screens.

I have a basic column layout, just 4 simple columns.

<div id="features-intro" class="row text-center ">
  <h1> Features </h1>
  <h5> What makes this theme great </h5>

  <div class="feature-col col-xs-8 col-sm-3">
    <a><img src="http://placehold.it/150x150"></img>
    </a>
    <h3> Feature 1 </h3>
    <p>Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. </p>
  </div>

  <div class="feature-col col-sm-3">
    <a><img src="http://placehold.it/150x150"></img>
    </a>
    <h3> Feature 1 </h3>
    <p>Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. </p>
  </div>

  <div class="feature-col col-sm-3">
    <a><img src="http://placehold.it/150x150"></img>
    </a>
    <h3> Feature 1 </h3>
    <p>Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. </p>
  </div>

  <div class="feature-col col-sm-3">
    <a><img src="http://placehold.it/150x150"></img>
    </a>
    <h3> Feature 1 </h3>
    <p>Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. </p>
  </div>

</div>

This looks like:

| _______ _______ _______ _______ |
| some t  some t  some t  some t  |
| ext     ext     ext     ext     |
|                                 |

Looks fine on larger screens, but when I get to xs screens, I get:

| _______________________ |
| some text some text som |

While I want:

|     ________     |
|     some tex     |
|      t some      |

So I add this class to each column:

class="col-xs-8 col-xs-push-2"

Adding those classes, I get the look I want when on smaller screens. But I only want it to be pushed over by two when the screen is xs. My problem is the columns are pushing on bigger screen sizes as well, which ruins the grid layout.

I've been messing with this for a little and can't figure out what it is. Am I adding the class to the wrong div? Missing something?

Thanks!

Upvotes: 0

Views: 61

Answers (1)

Varon
Varon

Reputation: 3916

The class for one block needs to be col-xs-offset-2 col-xs-8 and also col-sm-offset-0 col-sm-3

One block need to be cleared by a clearfix div for xs (http://getbootstrap.com/css/#grid-responsive-resets)

So you can define the complete layout for both xs and sm+. Keep in mind.. normally the sum of x in all the col-<RES>-x should not be greater than 12 for one row.

<div class="feature-col col-xs-offset-2 col-xs-8 col-sm-offset-0 col-sm-3">
  <a><img src="http://placehold.it/150x150" /></a>
  <h3>Feature 1</h3>
  <p>Text</p>
</div>

<div class="clearfix visible-xs-block"></div>

working example: https://jsfiddle.net/1kgyehc2/

Upvotes: 1

Related Questions