CODEWITHSUNDEEP
mobiletwitter-bootstrapjoomla
Laura B
Laura B

Reputation: 11

Changing Twitter's Bootstrap 2.x widths for mobile

I'm sorry if this is a simple question, but this is my first time using bootstrap. I'm having an issue with the way my site appears in mobile devices when they are horizontal. There is a huge amount of space on the either side of one section. Please see the picture:

enter image description here

This only seems to be an issue between the sizes of 320 and 768. Anything smaller and the space is gone, anything larger and it appears in one line. I would really appreciate any direction as I'm not sure which section I would need to change in order to even get started messing with things.

Upvotes: 1

Views: 969

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

Please read about Twitter's Boostrap's grid first: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

Every row (class row-fluid) contains 12 columns. Below 768 pixels screen width colums stack. You can use the span* classes to split your blocks of colums.

Example:

<div class="container" id="firstrow">
    <div class="row-fluid">
    <div class="span6">Content 1</div>
    <div class="span6">Content 2</div>
    </div>  
</div>

Above 767 pixels Content 1 en Content 2 will show next to each other. Below the 768 pixels they will show under each other (stacked). If you don't want the columns stack between 320px and 768px you could use media queries. With the example code above:

    @media (min-width: 320px) and (max-width: 767px)
    {
    /* Styles */
    #firstrow div.span6{ display: block;  float: left; width:48.9362%;}
    }

When using Twitter's Bootstrap 3.x

Twitter's Bootstrap 3 got a small 12 columns grid too. You could use a special col-small-span-* class for this. Also mention the span* classe are renamed to col-span-*:

<div class="col-span-4 col-small-span-6">

See: Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

To set the stacking point at 480px you will have to recompile yours css. Set @screen-small to 480px; and define your cols with: after that. Note this will change @grid-float-breakpoint also cause it is defined as @grid-float-breakpoint: @screen-tablet;.

see also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

Upvotes: 1

Related Questions