fbpx
indesign logo
ham icon
icon-eye indesign mediaBy InDesign Media | icon-eye indesign mediaJul 1, 2016 | icon-eye indesign media943 Views
icon-eye indesign mediaJul 1, 2016
icon-eye indesign mediaBy InDesign Media

CSS Media Queries:

When Bootstrap 3 was released, the most interesting change was the difference in the grid systems. Bootstrap 2 catered to two different browser sizes (desktop and then mobile). With Bootstrap 3, you now build with mobile in mind first, and the grid system lets you create different grids based on browser size.

Bootstrap 3 Columns Example

This can be a little hard to grasp at first so here’s an example. Let’s say you want a site that has:

  • 1 column on extra small devices
  • 2 columns on small AND medium devices
  • 4 columns on large devices

Bootstrap 3 Media Query Breakpoints

Bootstrap 3 is a mobile-first front-end framework. I have included the correct order for the CSS Media Queries below, but I have also included at the bottom of them the non-mobile first breakpoints in case some people are not used to the mobile-first methodology since technically both will work.

Min-Width: Refers to everything greater than or equal to the amount given.
Max-Width: Refers to everything less than or equal to the amount given.C

/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px){
}
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px){
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px){
} 
/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px){
}
/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px){
}
/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */ 
@media only screen and (max-width : 1200px){
}
/* Medium Devices, Desktops */ 
@media only screen and (max-width : 992px){
}
/* Small Devices, Tablets */ 
@media only screen and (max-width : 768px){
}
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px){
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px){
}

You can see that as the browser size gets smaller, the columns start to form. Also, the content inside each will begin stacking.

  • facebook
  • Twitter
  • linkedin
  • Pinterest
Newletter Indesign Media
TOOLS

Our Working Platforms

We provide start-ups and major corporations with comprehensive services that include innovative web solutions and expert assistance.

InDesign Media WhatsApp
Home Services
Quote
Portfolio Contact