Question

I have the following simple markup:

<div class="container">
    <div class="row">
        <div class="span8">
            <!- Main page -->
        </div>
        <div class="span4 visible-desktop">
            <!- Right-hand Sidebar -->
        </div>
    </div>
</div>

Basically, all I want is to remove the sidebar for non desktop devices so the main page takes up the whole width.

With the markup used, the sidebar is not visible on smaller screens (e.g. tablets) but the main bit does not extend across the whole screen and it just leaves a white gap.

On very small screens (e.g. mobiles), the sidebar does disappear correctly – I take it that this is when there is no room for it.

How can I change the markup/styling to get it to work as I require for tablet devices?

(I know jQuery is an option but would prefer a non-js approach if possible)

Answer 1

Okay so updated my question as I didn’t understand my OP question correctly the first time.

I dont believe that bootstrap intended the @media tags to work this way but you can edit your bootstrap-responsive.css code for the targeted media size.

you should see something like this in the css file

media (min-width: 768px) and (max-width: 979px) {
    .row {
         margin-left: -20px;
         *zoom: 1;
    }
.
.
.
    .magepage{
         width:100%;
    }
}

and have your code like this

<div class="container">
    <div class="row">
        <div class="span8 mainpage">
            <!- Main page -->
        </div>
        <div class="span4 visible-desktop">
            <!- Right-hand Sidebar -->
        </div>
    </div>
</div>

Hope this helps,