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

jfrux commented Apr 10, 2013

Very helpful, thank you!

@mreis1

This comment has been minimized.

Copy link

mreis1 commented Apr 13, 2013

Completely useful. Thanks

@moitorrijos

This comment has been minimized.

Copy link

moitorrijos commented Apr 26, 2013

Saved me ages!

@oaajayi

This comment has been minimized.

Copy link

oaajayi commented Aug 5, 2013

Thanks a lot! this is helpful

@panhna

This comment has been minimized.

Copy link

panhna commented Oct 15, 2013

thanks a lot !

@notredamstra

This comment has been minimized.

Copy link

notredamstra commented Dec 20, 2013

awesome

@Olliepop

This comment has been minimized.

Copy link

Olliepop commented Jan 4, 2014

Saved a lot of time thank you!

@ameikle

This comment has been minimized.

Copy link

ameikle commented Jan 5, 2014

Saved me a lot of time, Thank you!

@nikosantis

This comment has been minimized.

Copy link

nikosantis commented May 15, 2014

Thanks!

@jbess

This comment has been minimized.

Copy link

jbess commented Jul 24, 2014

Nice thank

@toklok

This comment has been minimized.

Copy link

toklok commented Aug 13, 2014

This is really useful, thanks.

@Johnn5

This comment has been minimized.

Copy link

Johnn5 commented Jul 17, 2015

Thanks mate, saved me a head scratch

@nitin7dc

This comment has been minimized.

Copy link

nitin7dc commented Aug 10, 2016

Thanks marcobarbosa

@Detsl

This comment has been minimized.

Copy link

Detsl commented Sep 22, 2016

Thank you!

@chikehenderson

This comment has been minimized.

Copy link

chikehenderson commented Nov 16, 2016

Good stuff

@AndyNormore

This comment has been minimized.

Copy link

AndyNormore commented Dec 13, 2016

Thank you, using at SkyRooms.io :)

@babu-aminul

This comment has been minimized.

Copy link

babu-aminul commented Jan 3, 2017

Thanks

@bgkerion

This comment has been minimized.

Copy link

bgkerion commented Feb 5, 2017

well done! Thank you

@Arturdko

This comment has been minimized.

Copy link

Arturdko commented Mar 1, 2017

Thanks for template. Will be used tomorrow.

@Specialist17

This comment has been minimized.

Copy link

Specialist17 commented Apr 3, 2017

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

@Himanshucodee

This comment has been minimized.

Copy link

Himanshucodee commented Jun 2, 2017

Awesome worrk

@Broomspun

This comment has been minimized.

Copy link

Broomspun commented Jun 18, 2017

Thanks!

@m0ns1f

This comment has been minimized.

Copy link

m0ns1f commented Oct 3, 2017

Thanks for the great work

@CChamroeun

This comment has been minimized.

Copy link

CChamroeun commented Oct 4, 2017

Great! thanks

@fantasmack

This comment has been minimized.

Copy link

fantasmack commented Oct 26, 2017

Tnks!

@cyprian-nziim

This comment has been minimized.

Copy link

cyprian-nziim commented Nov 3, 2017

Cool thanks!

@Mangaclub

This comment has been minimized.

Copy link

Mangaclub commented Mar 20, 2018

You have a undefined space between 480px and 768 px

@SynysterGrowly

This comment has been minimized.

Copy link

SynysterGrowly commented Apr 2, 2018

Lo voy a usar. Veré que tal!
Gracias

@toyindawudu

This comment has been minimized.

Copy link

toyindawudu commented May 20, 2018

Very helpful!!!

@QaisPalekar

This comment has been minimized.

Copy link

QaisPalekar commented Jun 27, 2018

Thanks!! Saved me a lot of trouble!!

@brookmant

This comment has been minimized.

Copy link

brookmant commented Dec 5, 2019

I love you

@WaiYan2510

This comment has been minimized.

Copy link

WaiYan2510 commented Dec 18, 2019

Thanks !!! it is very helpful.

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.