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.

Copy link

Aagbator commented Jun 5, 2017

thanks

@ericxtn

This comment has been minimized.

Copy link

ericxtn commented Jul 27, 2017

Thanks for that

@maggenti

This comment has been minimized.

Copy link

maggenti commented Aug 17, 2017

Finally, thanks

@shaon12332

This comment has been minimized.

Copy link

shaon12332 commented Sep 10, 2017

thanks

@newsapkota

This comment has been minimized.

Copy link

newsapkota commented Sep 27, 2017

thanks

@mohsinalimohsin

This comment has been minimized.

Copy link

mohsinalimohsin commented Oct 6, 2017

Awesome. Thanks

@Ultimadei

This comment has been minimized.

Copy link

Ultimadei commented Oct 29, 2017

This is great, thanks

@joelfranco89

This comment has been minimized.

Copy link

joelfranco89 commented Nov 4, 2017

Thanks!

@RockiRider

This comment has been minimized.

Copy link

RockiRider commented Nov 20, 2017

What a godsend

@NicholasBracey

This comment has been minimized.

Copy link

NicholasBracey commented Nov 24, 2017

Thank you!

@rdub2008

This comment has been minimized.

Copy link

rdub2008 commented Nov 26, 2017

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

@avatarvb

This comment has been minimized.

Copy link

avatarvb commented Dec 4, 2017

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

@Madhubalajb

This comment has been minimized.

Copy link

Madhubalajb commented Dec 19, 2017

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

@abSarpong

This comment has been minimized.

Copy link

abSarpong commented Jan 6, 2018

Thank you very much

@hitechqb

This comment has been minimized.

Copy link

hitechqb commented Jan 12, 2018

Thank you so much

@ebouchard91

This comment has been minimized.

Copy link

ebouchard91 commented Jan 18, 2018

You, dear sir, are the best

@lumen-creative

This comment has been minimized.

Copy link

lumen-creative commented Jan 27, 2018

Major time saver. Thank you!

@mayanktestweb

This comment has been minimized.

Copy link

mayanktestweb commented Jan 28, 2018

wow sir thank you so so much

@sekoudosso82

This comment has been minimized.

Copy link

sekoudosso82 commented Jan 29, 2018

Thanks maestro

@crtjr64

This comment has been minimized.

Copy link

crtjr64 commented Feb 11, 2018

Ditto

@rimatla

This comment has been minimized.

Copy link

rimatla commented Feb 19, 2018

Yes sir, Thank you!

@jesraygarciano

This comment has been minimized.

Copy link

jesraygarciano commented Feb 21, 2018

Thanks

@JoshuaDouce

This comment has been minimized.

Copy link

JoshuaDouce commented Feb 25, 2018

Thankyou

@shriram2017

This comment has been minimized.

Copy link

shriram2017 commented Feb 26, 2018

It helped me a lot. Thanks

@Lytiuga

This comment has been minimized.

Copy link

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.

Copy link

vvavdiya commented Feb 28, 2018

Thanks

@chipprogrammers

This comment has been minimized.

Copy link

chipprogrammers commented Mar 2, 2018

Thank you.. so much...

@MistyBlunch

This comment has been minimized.

Copy link

MistyBlunch commented Mar 9, 2018

Than you so much 👍

@iamprakasam

This comment has been minimized.

Copy link

iamprakasam commented Mar 10, 2018

Good one and thanks!

@SandraHerreraArriaga

This comment has been minimized.

Copy link

SandraHerreraArriaga commented Mar 14, 2018

Really works. Thanks!!!

@Enirate

This comment has been minimized.

Copy link

Enirate commented Mar 16, 2018

Thanks man.

@247rahimab

This comment has been minimized.

Copy link

247rahimab commented Apr 1, 2018

Thanks a lot. Very useful resources.

@AllanMwirigi

This comment has been minimized.

Copy link

AllanMwirigi commented Apr 18, 2018

Awesome, man. Thanks a lot

@YK7479

This comment has been minimized.

Copy link

YK7479 commented Apr 25, 2018

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

@Shashi99rocky

This comment has been minimized.

@lakerko

This comment has been minimized.

Copy link

lakerko commented May 9, 2018

Thank you.

@LuthandoE

This comment has been minimized.

Copy link

LuthandoE commented May 28, 2018

You are a legend!

@mugtin

This comment has been minimized.

Copy link

mugtin commented May 29, 2018

Thank you

@AlexisThink

This comment has been minimized.

Copy link

AlexisThink commented Jun 5, 2018

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

@idedalusse

This comment has been minimized.

Copy link

idedalusse commented Jun 7, 2018

thank you very much

@carocromatica

This comment has been minimized.

Copy link

carocromatica commented Jun 7, 2018

Thank you! 👍

@DHWP

This comment has been minimized.

Copy link

DHWP commented Jun 14, 2018

Cheers : -)

@dagenius007

This comment has been minimized.

Copy link

dagenius007 commented Jun 17, 2018

really helpful thanks alot

@kathy330

This comment has been minimized.

Copy link

kathy330 commented Jun 21, 2018

Thanks, it helps me a lot.

@suresh-jarvis

This comment has been minimized.

Copy link

suresh-jarvis commented Jun 22, 2018

Very helpful awesome man 💯

@ghost

This comment has been minimized.

Copy link

ghost commented Jun 23, 2018

Thank you!

@abiamarulloh

This comment has been minimized.

Copy link

abiamarulloh commented Jun 23, 2018

thank

@duongthienlee

This comment has been minimized.

Copy link

duongthienlee commented Jun 30, 2018

Awesome man! Thank you!

@jbbelerma

This comment has been minimized.

Copy link

jbbelerma commented Jul 3, 2018

Thanks!

@gokulkrishh

This comment has been minimized.

Copy link
Owner

gokulkrishh commented Jul 10, 2018

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

@abhijithvijayan

This comment has been minimized.

Copy link

abhijithvijayan commented Jul 13, 2018

Life saver dude, technically

@MichaelVanStan

This comment has been minimized.

Copy link

MichaelVanStan commented Jul 19, 2018

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

@chaosthunder

This comment has been minimized.

Copy link

chaosthunder commented Jul 23, 2018

Nice, dude.

@YvaneChristopher

This comment has been minimized.

Copy link

YvaneChristopher commented Jul 30, 2018

Thank you dude.

@Smon5

This comment has been minimized.

Copy link

Smon5 commented Aug 2, 2018

Excellent! thank you

@isaadabbasi

This comment has been minimized.

Copy link

isaadabbasi commented Aug 10, 2018

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

@calindotgabriel

This comment has been minimized.

Copy link

calindotgabriel commented Aug 13, 2018

ty!

@chisinhong

This comment has been minimized.

Copy link

chisinhong commented Aug 15, 2018

thanks

@chiliexe

This comment has been minimized.

Copy link

chiliexe commented Aug 19, 2018

thank man

@fathandanklowor

This comment has been minimized.

Copy link

fathandanklowor commented Aug 19, 2018

thanks man !

@MrBuble

This comment has been minimized.

Copy link

MrBuble commented Aug 29, 2018

Valeu

@m3rlin94

This comment has been minimized.

Copy link

m3rlin94 commented Aug 30, 2018

You are a life saver!! thanks man.

@HamSungJun

This comment has been minimized.

Copy link

HamSungJun commented Sep 2, 2018

awesome. good.

@afelopez

This comment has been minimized.

Copy link

afelopez commented Sep 5, 2018

That's awesome!! Thanks!

@GawiSh97

This comment has been minimized.

Copy link

GawiSh97 commented Sep 8, 2018

Great Job, Thanks man!

@khnwr

This comment has been minimized.

Copy link

khnwr commented Sep 15, 2018

mantap bro, sangat bermangpaat

@jaychasteen

This comment has been minimized.

Copy link

jaychasteen commented Sep 16, 2018

Thanks! This was exactly what I was looking for.

@felixbengtsson

This comment has been minimized.

Copy link

felixbengtsson commented Sep 16, 2018

Thanks

@sangumee

This comment has been minimized.

Copy link

sangumee commented Sep 17, 2018

Thanks for the help!

@madMAx43v3r

This comment has been minimized.

Copy link

madMAx43v3r commented Sep 17, 2018

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

@JavaGuy12

This comment has been minimized.

Copy link

JavaGuy12 commented Sep 18, 2018

Thank you so much! This will prove very helpful!

@Lakshan2d

This comment has been minimized.

Copy link

Lakshan2d commented Sep 20, 2018

Thank this this very helpful

@dusanmedic

This comment has been minimized.

Copy link

dusanmedic commented Sep 20, 2018

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

@varnit-abraham

This comment has been minimized.

Copy link

varnit-abraham commented Sep 22, 2018

This is really helpful. Thanks.

@James-Daniel01

This comment has been minimized.

Copy link

James-Daniel01 commented Sep 24, 2018

Thanks a lot :)

@MhamedEl-shahawy

This comment has been minimized.

Copy link

MhamedEl-shahawy commented Sep 26, 2018

Thank you, great work -:)

@JavedKhanUI

This comment has been minimized.

Copy link

JavedKhanUI commented Sep 26, 2018

Thanks

@hmtanbir

This comment has been minimized.

Copy link

hmtanbir commented Sep 28, 2018

Thanks a lot.

@nicollasmatheus

This comment has been minimized.

Copy link

nicollasmatheus commented Oct 1, 2018

thanks

@ajaykumar22

This comment has been minimized.

Copy link

ajaykumar22 commented Oct 1, 2018

Thank you.. so much...

@ryoboua

This comment has been minimized.

Copy link

ryoboua commented Oct 2, 2018

thanks man!

@Lucif3rRules

This comment has been minimized.

Copy link

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.

Copy link

teffcode commented Oct 12, 2018

Thanks <3

@h3nr1ke

This comment has been minimized.

Copy link

h3nr1ke commented Oct 19, 2018

Thanks (=

@ahmadraza47

This comment has been minimized.

Copy link

ahmadraza47 commented Oct 20, 2018

Great. Weldone.

@marcusflat

This comment has been minimized.

Copy link

marcusflat commented Oct 26, 2018

Really helpful, Thanks!

@truongcuong90

This comment has been minimized.

Copy link

truongcuong90 commented Nov 1, 2018

Thanks so much...

@zephyrmike

This comment has been minimized.

Copy link

zephyrmike commented Nov 1, 2018

Thank you, this is a great resource

@Hfcomic

This comment has been minimized.

Copy link

Hfcomic commented Nov 8, 2018

Thank you

@Kulasekaransekar

This comment has been minimized.

Copy link

Kulasekaransekar commented Nov 16, 2018

Thanks a lot.. Really Helpfullll

@mokeam

This comment has been minimized.

Copy link

mokeam commented Nov 19, 2018

Saved me a lot of stress, thank you so much!

@mahimusa

This comment has been minimized.

Copy link

mahimusa commented Nov 22, 2018

thanks a million

@SimplePotato

This comment has been minimized.

Copy link

SimplePotato commented Nov 24, 2018

Thank you, thank you, thank you. <3 This saved me so much time.

@qw893821

This comment has been minimized.

Copy link

qw893821 commented Nov 25, 2018

thanks

@Ketchadaprons

This comment has been minimized.

Copy link

Ketchadaprons commented Nov 27, 2018

Thanks

@AdriaRios

This comment has been minimized.

Copy link

AdriaRios commented Nov 27, 2018

Thanks!

@wiwats

This comment has been minimized.

Copy link

wiwats commented Dec 3, 2018

Thank you

@zenVentzi

This comment has been minimized.

Copy link

zenVentzi commented Dec 7, 2018

WOW! So many thanks, couldn't help myself but thank you!

@protocorenet

This comment has been minimized.

Copy link

protocorenet commented Dec 9, 2018

This is awesome, Thank you

@probuse

This comment has been minimized.

Copy link

probuse commented Dec 10, 2018

great resource, thanks

@wahabxada

This comment has been minimized.

Copy link

wahabxada commented Dec 13, 2018

saving time thanks for that

@A1K2S3

This comment has been minimized.

Copy link

A1K2S3 commented Dec 13, 2018

Thanks Buddy, It helped alot ;)

@anagranados

This comment has been minimized.

Copy link

anagranados commented Dec 20, 2018

Thanks a lot

@morexwell

This comment has been minimized.

Copy link

morexwell commented Dec 20, 2018

thank you

@shivamsharmabtp

This comment has been minimized.

Copy link

shivamsharmabtp commented Dec 24, 2018

thanks

@fordchastain

This comment has been minimized.

Copy link

fordchastain commented Dec 27, 2018

yes! thank you.

@kasongoyo

This comment has been minimized.

Copy link

kasongoyo commented Jan 5, 2019

Thanks

@Ncamacho2

This comment has been minimized.

Copy link

Ncamacho2 commented Jan 9, 2019

thank you.

@Attaulla9

This comment has been minimized.

Copy link

Attaulla9 commented Jan 11, 2019

Thank you so much.
It help me lot...

@abilayi

This comment has been minimized.

Copy link

abilayi commented Jan 14, 2019

I am new to css media queries. Any help will be appreciated. I use the divi theme by elegant themes. Where do i put this code?

@ta-riq

This comment has been minimized.

Copy link

ta-riq commented Jan 15, 2019

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

You put this script or code in a css file. Maybe you can name it "resposive.css"

then link it to your html page.

@manavjha

This comment has been minimized.

Copy link

manavjha commented Jan 15, 2019

Just Awsome :-)

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