CODEWITHSUNDEEP
csstwitter-bootstrap
Yax
Yax

Reputation: 2189

Bootstrap Leaves Too Much Offset on Mobile Devices

I have tried building a page with Bootstrap 3.3.6 and it works fine on laptop but when I simulate Mobile viewing on Chrome and other browsers I get too much offset as shown in the picture below:

Current result:

Current result...

Expected result:

Expected result.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
           Some content...
        </div>
        <div class="col-md-3">
           Some content...
        </div>
        <div class="col-md-3">
           Some content...
        </div>
    </div>
</div>

I have also tried <div class="container"> but it is still the same. And the meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Upvotes: 0

Views: 748

Answers (1)

Eric Guan
Eric Guan

Reputation: 15982

The point of Bootstrap is that it's responsive, but you need to follow their conventions to make it so. col-md-x applies to "medium" screens. When you target mobile, you need to use col-xs-x. So a div with class="col-xs-6 col-md-3" means that on phone screens, the div will be 6 columns, and on desktop screens it will be 3 columns.

I recommend you read the docs, http://getbootstrap.com/css/

Relevant portion:

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Upvotes: 2

Related Questions