Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS3 Media Queries template
/*
* Author: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
@jfrux

This comment has been minimized.

Copy link

commented Apr 10, 2013

Very helpful, thank you!

@mreis1

This comment has been minimized.

Copy link

commented Apr 13, 2013

Completely useful. Thanks

@moitorrijos

This comment has been minimized.

Copy link

commented Apr 26, 2013

Saved me ages!

@oaajayi

This comment has been minimized.

Copy link

commented Aug 5, 2013

Thanks a lot! this is helpful

@panhna

This comment has been minimized.

Copy link

commented Oct 15, 2013

thanks a lot !

@notredamstra

This comment has been minimized.

Copy link

commented Dec 20, 2013

awesome

@Olliepop

This comment has been minimized.

Copy link

commented Jan 4, 2014

Saved a lot of time thank you!

@ameikle

This comment has been minimized.

Copy link

commented Jan 5, 2014

Saved me a lot of time, Thank you!

@nikosantis

This comment has been minimized.

Copy link

commented May 15, 2014

Thanks!

@jbess

This comment has been minimized.

Copy link

commented Jul 24, 2014

Nice thank

@toklok

This comment has been minimized.

Copy link

commented Aug 13, 2014

This is really useful, thanks.

@Johnn5

This comment has been minimized.

Copy link

commented Jul 17, 2015

Thanks mate, saved me a head scratch

@nitin7dc

This comment has been minimized.

Copy link

commented Aug 10, 2016

Thanks marcobarbosa

@Detsl

This comment has been minimized.

Copy link

commented Sep 22, 2016

Thank you!

@chikehenderson

This comment has been minimized.

Copy link

commented Nov 16, 2016

Good stuff

@AndyNormore

This comment has been minimized.

Copy link

commented Dec 13, 2016

Thank you, using at SkyRooms.io :)

@babu-aminul

This comment has been minimized.

Copy link

commented Jan 3, 2017

Thanks

@bgkerion

This comment has been minimized.

Copy link

commented Feb 5, 2017

well done! Thank you

@Arturdko

This comment has been minimized.

Copy link

commented Mar 1, 2017

Thanks for template. Will be used tomorrow.

@Specialist17

This comment has been minimized.

Copy link

commented Apr 3, 2017

You are a good human, this is very helpful! Thank you!

@Himanshucodee

This comment has been minimized.

Copy link

commented Jun 2, 2017

Awesome worrk

@Broomspun

This comment has been minimized.

Copy link

commented Jun 18, 2017

Thanks!

@m0ns1f

This comment has been minimized.

Copy link

commented Oct 3, 2017

Thanks for the great work

@CChamroeun

This comment has been minimized.

Copy link

commented Oct 4, 2017

Great! thanks

@fantasmack

This comment has been minimized.

Copy link

commented Oct 26, 2017

Tnks!

@cyprian-nziim

This comment has been minimized.

Copy link

commented Nov 3, 2017

Cool thanks!

@Mangaclub

This comment has been minimized.

Copy link

commented Mar 20, 2018

You have a undefined space between 480px and 768 px

@SynysterGrowly

This comment has been minimized.

Copy link

commented Apr 2, 2018

Lo voy a usar. Veré que tal!
Gracias

@toyindawudu

This comment has been minimized.

Copy link

commented May 20, 2018

Very helpful!!!

@QaisPalekar

This comment has been minimized.

Copy link

commented Jun 27, 2018

Thanks!! Saved me a lot of trouble!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.