Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Media Queries for Desktop, Tablet, Mobile.
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
//CSS
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
//CSS
}
@Aagbator

This comment has been minimized.

Aagbator commented Jun 5, 2017

thanks

@ericxtn

This comment has been minimized.

ericxtn commented Jul 27, 2017

Thanks for that

@maggenti

This comment has been minimized.

maggenti commented Aug 17, 2017

Finally, thanks

@shaon12332

This comment has been minimized.

shaon12332 commented Sep 10, 2017

thanks

@newsapkota

This comment has been minimized.

newsapkota commented Sep 27, 2017

thanks

@mohsinalimohsin

This comment has been minimized.

mohsinalimohsin commented Oct 6, 2017

Awesome. Thanks

@Ultimadei

This comment has been minimized.

Ultimadei commented Oct 29, 2017

This is great, thanks

@joelfranco89

This comment has been minimized.

joelfranco89 commented Nov 4, 2017

Thanks!

@RockiRider

This comment has been minimized.

RockiRider commented Nov 20, 2017

What a godsend

@NicholasBracey

This comment has been minimized.

NicholasBracey commented Nov 24, 2017

Thank you!

@rdub2008

This comment has been minimized.

rdub2008 commented Nov 26, 2017

Where do I put this script? Sorry, a newbie.

@avatarvb

This comment has been minimized.

avatarvb commented Dec 4, 2017

wow,bein fait merci pour l'effort fourni +1:

@Madhubalajb

This comment has been minimized.

Madhubalajb commented Dec 19, 2017

A million thanks, dude... You have saved my time!! ;)

@abSarpong

This comment has been minimized.

abSarpong commented Jan 6, 2018

Thank you very much

@hitechqb

This comment has been minimized.

hitechqb commented Jan 12, 2018

Thank you so much

@ebouchard91

This comment has been minimized.

ebouchard91 commented Jan 18, 2018

You, dear sir, are the best

@lumen-creative

This comment has been minimized.

lumen-creative commented Jan 27, 2018

Major time saver. Thank you!

@mayanktestweb

This comment has been minimized.

mayanktestweb commented Jan 28, 2018

wow sir thank you so so much

@sekoudosso82

This comment has been minimized.

sekoudosso82 commented Jan 29, 2018

Thanks maestro

@crtjr64

This comment has been minimized.

crtjr64 commented Feb 11, 2018

Ditto

@rimatla

This comment has been minimized.

rimatla commented Feb 19, 2018

Yes sir, Thank you!

@jesraygarciano

This comment has been minimized.

jesraygarciano commented Feb 21, 2018

Thanks

@JoshuaDouce

This comment has been minimized.

JoshuaDouce commented Feb 25, 2018

Thankyou

@shriram2017

This comment has been minimized.

shriram2017 commented Feb 26, 2018

It helped me a lot. Thanks

@Lytiuga

This comment has been minimized.

Lytiuga commented Feb 26, 2018

Thank you so much, man! The first working code that I could found!
one little issue: in string 29 I added
and (orientation: portrait)

  • without this addition, Mozilla Responsive tool show me that rules for Ipad landscape were overwritten by iPad portrait
@vvavdiya

This comment has been minimized.

vvavdiya commented Feb 28, 2018

Thanks

@chipprogrammers

This comment has been minimized.

chipprogrammers commented Mar 2, 2018

Thank you.. so much...

@MistyBlunch

This comment has been minimized.

MistyBlunch commented Mar 9, 2018

Than you so much 👍

@iamprakasam

This comment has been minimized.

iamprakasam commented Mar 10, 2018

Good one and thanks!

@SandraHerreraArriaga

This comment has been minimized.

SandraHerreraArriaga commented Mar 14, 2018

Really works. Thanks!!!

@Enirate

This comment has been minimized.

Enirate commented Mar 16, 2018

Thanks man.

@247rahimab

This comment has been minimized.

247rahimab commented Apr 1, 2018

Thanks a lot. Very useful resources.

@AllanMwirigi

This comment has been minimized.

AllanMwirigi commented Apr 18, 2018

Awesome, man. Thanks a lot

@YK7479

This comment has been minimized.

YK7479 commented Apr 25, 2018

Awesome, works, Thanks, man... Looking forward.

@Shashi99rocky

This comment has been minimized.

@lakerko

This comment has been minimized.

lakerko commented May 9, 2018

Thank you.

@LuthandoE

This comment has been minimized.

LuthandoE commented May 28, 2018

You are a legend!

@mugtin

This comment has been minimized.

mugtin commented May 29, 2018

Thank you

@AlexisThink

This comment has been minimized.

AlexisThink commented Jun 5, 2018

The best media-queries to work faster and cover the most important devices.

@idedalusse

This comment has been minimized.

idedalusse commented Jun 7, 2018

thank you very much

@carocromatica

This comment has been minimized.

carocromatica commented Jun 7, 2018

Thank you! 👍

@DHWP

This comment has been minimized.

DHWP commented Jun 14, 2018

Cheers : -)

@dagenius007

This comment has been minimized.

dagenius007 commented Jun 17, 2018

really helpful thanks alot

@kathy330

This comment has been minimized.

kathy330 commented Jun 21, 2018

Thanks, it helps me a lot.

@suresh-jarvis

This comment has been minimized.

suresh-jarvis commented Jun 22, 2018

Very helpful awesome man 💯

@ghost

This comment has been minimized.

ghost commented Jun 23, 2018

Thank you!

@abiamarulloh

This comment has been minimized.

abiamarulloh commented Jun 23, 2018

thank

@duongthienlee

This comment has been minimized.

duongthienlee commented Jun 30, 2018

Awesome man! Thank you!

@jbbelerma

This comment has been minimized.

jbbelerma commented Jul 3, 2018

Thanks!

@gokulkrishh

This comment has been minimized.

Owner

gokulkrishh commented Jul 10, 2018

Thankyou all. Happy that this piece of code helped you all 💃

@abhijithvijayan

This comment has been minimized.

abhijithvijayan commented Jul 13, 2018

Life saver dude, technically

@MichaelVanStan

This comment has been minimized.

MichaelVanStan commented Jul 19, 2018

Thank you - I'm forever trying to reference high level queries lol

@chaosthunder

This comment has been minimized.

chaosthunder commented Jul 23, 2018

Nice, dude.

@YvaneChristopher

This comment has been minimized.

YvaneChristopher commented Jul 30, 2018

Thank you dude.

@Smon5

This comment has been minimized.

Smon5 commented Aug 2, 2018

Excellent! thank you

@isaadabbasi

This comment has been minimized.

isaadabbasi commented Aug 10, 2018

Thank you very much, this is so much time saving :)

@calindotgabriel

This comment has been minimized.

calindotgabriel commented Aug 13, 2018

ty!

@chisinhong

This comment has been minimized.

chisinhong commented Aug 15, 2018

thanks

@chiliexe

This comment has been minimized.

chiliexe commented Aug 19, 2018

thank man

@fathandanklowor

This comment has been minimized.

fathandanklowor commented Aug 19, 2018

thanks man !

@MrBuble

This comment has been minimized.

MrBuble commented Aug 29, 2018

Valeu

@m3rlin94

This comment has been minimized.

m3rlin94 commented Aug 30, 2018

You are a life saver!! thanks man.

@HamSungJun

This comment has been minimized.

HamSungJun commented Sep 2, 2018

awesome. good.

@afelopez

This comment has been minimized.

afelopez commented Sep 5, 2018

That's awesome!! Thanks!

@GawiSh97

This comment has been minimized.

GawiSh97 commented Sep 8, 2018

Great Job, Thanks man!

@khnwr

This comment has been minimized.

khnwr commented Sep 15, 2018

mantap bro, sangat bermangpaat

@jaychasteen

This comment has been minimized.

jaychasteen commented Sep 16, 2018

Thanks! This was exactly what I was looking for.

@felixbengtsson

This comment has been minimized.

felixbengtsson commented Sep 16, 2018

Thanks

@sangumee

This comment has been minimized.

sangumee commented Sep 17, 2018

Thanks for the help!

@madMAx43v3r

This comment has been minimized.

madMAx43v3r commented Sep 17, 2018

My LG G3 has 1440 pixels screen width, how would that work?

@JavaGuy12

This comment has been minimized.

JavaGuy12 commented Sep 18, 2018

Thank you so much! This will prove very helpful!

@Lakshan2d

This comment has been minimized.

Lakshan2d commented Sep 20, 2018

Thank this this very helpful

@dusanmedic

This comment has been minimized.

dusanmedic commented Sep 20, 2018

Oh boy, you just saved my life... Thank you so much!

@varnit-abraham

This comment has been minimized.

varnit-abraham commented Sep 22, 2018

This is really helpful. Thanks.

@James-Daniel01

This comment has been minimized.

James-Daniel01 commented Sep 24, 2018

Thanks a lot :)

@MhamedEl-shahawy

This comment has been minimized.

MhamedEl-shahawy commented Sep 26, 2018

Thank you, great work -:)

@JavedKhanUI

This comment has been minimized.

JavedKhanUI commented Sep 26, 2018

Thanks

@hmtanbir

This comment has been minimized.

hmtanbir commented Sep 28, 2018

Thanks a lot.

@nicollasmatheus

This comment has been minimized.

nicollasmatheus commented Oct 1, 2018

thanks

@ajaykumar22

This comment has been minimized.

ajaykumar22 commented Oct 1, 2018

Thank you.. so much...

@ryoboua

This comment has been minimized.

ryoboua commented Oct 2, 2018

thanks man!

@Lucif3rRules

This comment has been minimized.

Lucif3rRules commented Oct 6, 2018

Really Helped to be more specific i add this one more

@media (min-width: 1281px) {
// CSS
}
@media (min-width: 1200px) and (max-width: 1280px){
// CSS
}
@media (min-width: 1025px) and (max-width: 1999px){
// CSS
}
@teffcode

This comment has been minimized.

teffcode commented Oct 12, 2018

Thanks <3

@h3nr1ke

This comment has been minimized.

h3nr1ke commented Oct 19, 2018

Thanks (=

@ahmadraza47

This comment has been minimized.

ahmadraza47 commented Oct 20, 2018

Great. Weldone.

@marcusflat

This comment has been minimized.

marcusflat commented Oct 26, 2018

Really helpful, Thanks!

@truongcuong90

This comment has been minimized.

truongcuong90 commented Nov 1, 2018

Thanks so much...

@zephyrmike

This comment has been minimized.

zephyrmike commented Nov 1, 2018

Thank you, this is a great resource

@Hfcomic

This comment has been minimized.

Hfcomic commented Nov 8, 2018

Thank you

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