Question

I am new to responsive design, I am toying with twitter bootstrap responsive.css now. And I am encountering some trouble with my project.

The trouble is, my left column won’t collapse (if that’s the right term), or won’t stack up. What I want is, the left column shall shift below the span8 column and resize it’s width. What it does for now is, left column’s width decreases and squeezing all it’s contents inside it. I am targeting mobile screen size of 768×1024 media screens.

My basic markup for the layout is, span8 for the left and span4 for the right. span4 is where my other blocks is.

<div class="row">
<div class="span8">
    some block with contents
</div>

<div classs="span4">
    <div class="sideBlock"><!--fluid width was set-->
        <img src="http://placehold.it/298x77">
    </div>
</div>

My main question is, how do we target a specific screen size using media queries (using twitter bootstrap). And then customize it to fit our needs?

Answer 1

I finally got this one, by reading articles from blogs and stack overflow questions that had been answered, and articles posted from your comments on this question.

Based from common Breakpoints and View-ports for Mobile devices, i.e. 1200px wide viewport for large destkops, I have to insert my own style in a media query.

I.E., @media (min-width) {mystyle here}

@media (min-width: 1200px) {
      .myContainer {
           width: 960px;
           margin: 0 auto;

      }
      .myleftBlock-should-collapse {
           float: none;
           width: 100%;
      }

 }

Since I am using the Twitter Bootstrap Responsive.css file, I need to customize the media query for certain viewport, so that It will fit to my design needs.

Well since I am designing a fixed-width of 960px, I will customize and re-calculate the widths for my .container and span classes. I will convert pixel to percent base from my base width of 960px.

So whatever block or element that I would want to collapse, hide or show in certain viewports, shall be styled accordingly inside the media query.

And… New thing I learned about responsive design. Screen size is different from Viewport.