Create a gist now

Instantly share code, notes, and snippets.

Embed
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.

Show comment
Hide comment
@jfrux

jfrux Apr 10, 2013

Very helpful, thank you!

jfrux commented Apr 10, 2013

Very helpful, thank you!

@mreis1

This comment has been minimized.

Show comment
Hide comment
@mreis1

mreis1 Apr 13, 2013

Completely useful. Thanks

mreis1 commented Apr 13, 2013

Completely useful. Thanks

@moitorrijos

This comment has been minimized.

Show comment
Hide comment
@moitorrijos

moitorrijos Apr 26, 2013

Saved me ages!

Saved me ages!

@oaajayi

This comment has been minimized.

Show comment
Hide comment
@oaajayi

oaajayi Aug 5, 2013

Thanks a lot! this is helpful

oaajayi commented Aug 5, 2013

Thanks a lot! this is helpful

@panhna

This comment has been minimized.

Show comment
Hide comment
@panhna

panhna Oct 15, 2013

thanks a lot !

panhna commented Oct 15, 2013

thanks a lot !

@notredamstra

This comment has been minimized.

Show comment
Hide comment
@notredamstra

notredamstra Dec 20, 2013

awesome

awesome

@Olliepop

This comment has been minimized.

Show comment
Hide comment
@Olliepop

Olliepop Jan 4, 2014

Saved a lot of time thank you!

Olliepop commented Jan 4, 2014

Saved a lot of time thank you!

@ameikle

This comment has been minimized.

Show comment
Hide comment
@ameikle

ameikle Jan 5, 2014

Saved me a lot of time, Thank you!

ameikle commented Jan 5, 2014

Saved me a lot of time, Thank you!

@nikosantis

This comment has been minimized.

Show comment
Hide comment
@nikosantis

nikosantis May 15, 2014

Thanks!

Thanks!

@jbess

This comment has been minimized.

Show comment
Hide comment
@jbess

jbess Jul 24, 2014

Nice thank

jbess commented Jul 24, 2014

Nice thank

@toklok

This comment has been minimized.

Show comment
Hide comment
@toklok

toklok Aug 13, 2014

This is really useful, thanks.

toklok commented Aug 13, 2014

This is really useful, thanks.

@Johnn5

This comment has been minimized.

Show comment
Hide comment
@Johnn5

Johnn5 Jul 17, 2015

Thanks mate, saved me a head scratch

Johnn5 commented Jul 17, 2015

Thanks mate, saved me a head scratch

@nitin7dc

This comment has been minimized.

Show comment
Hide comment
@nitin7dc

nitin7dc Aug 10, 2016

Thanks marcobarbosa

Thanks marcobarbosa

@Detsl

This comment has been minimized.

Show comment
Hide comment
@Detsl

Detsl Sep 22, 2016

Thank you!

Detsl commented Sep 22, 2016

Thank you!

@chikehenderson

This comment has been minimized.

Show comment
Hide comment
@chikehenderson

chikehenderson Nov 16, 2016

Good stuff

Good stuff

@AndyNormore

This comment has been minimized.

Show comment
Hide comment
@AndyNormore

AndyNormore Dec 13, 2016

Thank you, using at SkyRooms.io :)

Thank you, using at SkyRooms.io :)

@babu-aminul

This comment has been minimized.

Show comment
Hide comment
@babu-aminul

babu-aminul Jan 3, 2017

Thanks

Thanks

@bgkerion

This comment has been minimized.

Show comment
Hide comment
@bgkerion

bgkerion Feb 5, 2017

well done! Thank you

bgkerion commented Feb 5, 2017

well done! Thank you

@Arturdko

This comment has been minimized.

Show comment
Hide comment
@Arturdko

Arturdko Mar 1, 2017

Thanks for template. Will be used tomorrow.

Arturdko commented Mar 1, 2017

Thanks for template. Will be used tomorrow.

@Specialist17

This comment has been minimized.

Show comment
Hide comment
@Specialist17

Specialist17 Apr 3, 2017

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

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

@Himanshucodee

This comment has been minimized.

Show comment
Hide comment
@Himanshucodee

Himanshucodee Jun 2, 2017

Awesome worrk

Awesome worrk

@Broomspun

This comment has been minimized.

Show comment
Hide comment
@Broomspun

Broomspun Jun 18, 2017

Thanks!

Thanks!

@m0ns1f

This comment has been minimized.

Show comment
Hide comment
@m0ns1f

m0ns1f Oct 3, 2017

Thanks for the great work

m0ns1f commented Oct 3, 2017

Thanks for the great work

@CChamroeun

This comment has been minimized.

Show comment
Hide comment
@CChamroeun

CChamroeun Oct 4, 2017

Great! thanks

Great! thanks

@fantasmack

This comment has been minimized.

Show comment
Hide comment
@fantasmack

fantasmack Oct 26, 2017

Tnks!

Tnks!

@freehandman

This comment has been minimized.

Show comment
Hide comment
@freehandman

freehandman Nov 3, 2017

Cool thanks!

Cool thanks!

@Mangaclub

This comment has been minimized.

Show comment
Hide comment
@Mangaclub

Mangaclub Mar 20, 2018

You have a undefined space between 480px and 768 px

You have a undefined space between 480px and 768 px

@SynysterGrowly

This comment has been minimized.

Show comment
Hide comment
@SynysterGrowly

SynysterGrowly Apr 2, 2018

Lo voy a usar. Veré que tal!
Gracias

Lo voy a usar. Veré que tal!
Gracias

@toyindawudu

This comment has been minimized.

Show comment
Hide comment
@toyindawudu

toyindawudu May 20, 2018

Very helpful!!!

Very helpful!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment