How to target a specific screen size using @media

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 768x1024 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.

Answer 2

You need to use the row-fluid class (instead of the row class) in order to benefit from the responsive part of Bootstrap. Read more at http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem.

So your basic layout should be:

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Answer 3

One extra and interesting feaure is that you can also use-media queries in the media attribute of the <link> tag.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 768px)">

With this, the browser will download all CSS resources, regardless of the media attribute. The difference is that if the media-query of the media attribute is evaluated to false then that .css file and his content will not be render-blocking.

Therefore, it is recommended to use the media attribute in the <link> tag since it guarantees a better user experience.

Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Some tools that will help you to automate the separation of your css code in different files according to your media-querys

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

Answer 4

Since you are using Bootstrap, use the default variables to target specific screen sizes:

// Extra small screen / phone
$screen-xs:                  480px !default;

// Small screen / tablet
$screen-sm:                  768px !default;

// Medium screen / desktop
$screen-md:                  992px !default;

// Large screen / wide desktop
$screen-lg:                  1200px !default;

Example:

@media (min-width: $screen-sm) and (max-width: $screen-md) {
    /*
     * styles go here
     */
}  

Answer 5

The row-fluid class exapmles in Bootstrap can be found here http://getbootstrap.com/2.3.2/examples/fluid.html

If you want Visual Studio to help with CSS then get the LESS file from http://bootswatch.com, and get the Twitter.Bootstrap.Less nuget package. Then add the following to the bootswatch.less file

@import url("bootstrap/bootstrap.less");

There is alternative to Boostrap row-fluid, called 'Foundation' http://foundation.zurb.com/develop/download.html#customizeFoundation

It has definitions for 'small' and 'large' media and lots more:

<div class="show-for-small" style="text-align: center">
    <a href="#">Desktop here</a>
</div>
<div class="large-4 columns hide-for-small">
    <a href="#">
        <div class="panel radius callout" style="text-align: center">
        <strong>Mobile here</strong>
        </div>
    </a>
</div>