CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designtwitter-bootstrap-3
netdigger
netdigger

Reputation: 3789

Twitter bootstrap only looks strange on device "sm"

I've got the following code: http://jsfiddle.net/W7CLF/

on xs devices, it looks nice, it splits to two rows, and then on > sm it look nice as well. Staying on one line..

But I cannot understand why it looks strange on sm.

As you can see I've used hidden-sm hidden-md hidden-lg on xs to show different layouts on different devices and hidden-xs to show another layout on device != xs

Maybe I'm doing it wrong?

Upvotes: 0

Views: 84

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49054

You should add a sketch of your results per grid maybe. So far i understand your code. It seems you will have:

xs-grid:

med  | 600kr
------------
home | 60

and sm-, md, lg grid:

Med        | Home | 60 | 600

So try this:

<div class="container">
    <div class="row activityItem">
    <div class="col-xs-6 col-sm-6"><p class="activityText">Medicinsk fotvård</p></div>
    <div class="col-xs-6 col-sm-2 col-sm-push-4"><p class="activityText activityTextRight">600 kr</p></div>
    <div class="col-xs-6 col-sm-2 col-sm-pull-2"><p class="activityText activityTextRight"><i class="fa fa-home">Home</i></p></div>
    <div class="col-xs-6 col-sm-2 col-sm-pull-2"><p class="activityText activityTextRight">60 minuter</p></div>
</div>
</div>

notes: In your code you use: col-md-6 hidden-xs you define nothing for the sm-grid here. This div will get 100% width on the sm grid. try col-sm-6 hidden-xs You also use col-md-6 hidden-sm hidden-md hidden-lg only visible on the xs-grid. your col-md-6 has no effect on this grid.

Upvotes: 2

Related Questions