Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Media Queries CSS

HI,

Could somebody give me the perfect Media Queries for Bootstrap?

1 Answer

Luke Pettway
Luke Pettway
16,593 Points

Are you just looking for basic queries to start with in general? I typically go with the following:

/* 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) {

    }

This is by no means an extensive list though, as you will need to add in queries for project specific needs.

There are also some built in ones as well using LESS http://getbootstrap.com/css/#grid-media-queries: 

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Konrad Pilch
Konrad Pilch
2,435 Points

Looks good, thank you!

I hate adjusting media queries and i still dont have a template . Thank you!