CSS Media Queries for Beginners: Breakpoints, Max-Width, Min-Width, and More

[@traoresambaabdel1856]

i've just been able to submit my final after watching this.

[@cemeygimedia]

good luck :)

[@liliabekuzinaensosense8580]

Thank you! You are a genius of explaining in the way that even beginners can understand! 🙏🏻

[@cemeygimedia]

you're welcome! I'm glad that my video helped you :)

[@Heffalumpsandbruises]

You make the best videos on CSS. Thank you : )

[@stealthbusiness]

Thank you for all your tutorials. So helpful. I am in learning mode, so I hoping you would be willing to let us know the following. I believe this is a Media Query question. I have 4 different full screen videos one for each breakpoint. How do add each one to the assigned breakpoint?

[@mpmcgrath]

Thank you. Just learned something new about @media queries.

[@isaouz]

Eline sağlık. Yeni öğreniyorum ve tek başıma zorlandığım yerler oluyor. Zar zor yaptığım sitenin telefonda iç içe geçtiğini görünce buraya kadar geldim :D

[@cemeygimedia]

Tesekkürler, zamanla ögrenirsin :)

[@Soldier310]

thank you very much sir your video is very helful......i wish brightness your future

[@kmgurumurthaiah1196]

Thank you for simple explanations.. 👏👏

[@posguy13]

Clear and concise. Thanks!

[@maryammahtab7886]

Great video , I easily learnt from it 👍🏻

[@sarahlennox277]

Can you please save my sanity and let me know, how I use a media query for the iphone 8 and the iphone X when they both have the same width of 375px?

[@gulsummaslak9753]

I'm trying to make my website mobile-compatible, everything overlaps when the phone is turned horizontally. what do you suggest. The codes I wrote for the phone are @media only screen and (min-width: 150px) and (max-width: 600px) {} my other media codes @media only screen and (min-width: 600px) and (max-width: 800px) {} @media only screen and (min-width: 800px) and (max-width: 1024px) {} There is a problem in the horizontal

[@JorgeRivera-rp1zw]

My dear friend I have the same trouble. I did a web page with pure code Html. CSS, and a few JS, but have a trouble in place the @media queries..please help us

[@mrg3921]

Great explanation! Thanks man!

[@blurryface4969]

simple and great video. thanks!

[@talabsa4108]

You Open My problem You Legendary 😍😍😘

[@ivanleuskov1307]

Thanks a lot for the explanation!

[@yamunananthikatt3320]

thank you so much.really helping

[@harunguven8581]

bravo, super aciklayici video!

[@guitarherozzz4009]

My website is not responding to ANY media queries on ANY min/max pixels. What is going on? I have my folder structure correct. Perhaps I'm missing a specific html meta tag?

[@cemeygimedia]

Did you include this tag in the section of your code?: **

[@guitarherozzz4009]

@@cemeygimedia Yes, I had that. Thank you for the response. So, I had made a separate css file called queries.css, and put it in the same folder my main css was in, but somehow wasn't linked to my overall project. I am now doing the queries inside my main css file and it works fine. Weird.

[@braham.prakash]

very nicely explained 👍👍

[@drakeo7594]

as soon as he said "toogle" to 3:18 I decided to try and find another video lol

[@takrutamakshidhinchanumayr2366]

Yuppie

[@Rohit_patel230]

❤️

[@Flonfl0n]

What about mobile devices that are 1920x1080px ? it won't work, will it?

[@danb2839]

Read your article! I never knew about putting media queries at end of css. Thanks! I learned so much! No wonder it wasn't working.

[@chrisboden9820]

Thank you so much for this. Such a clear and simple explanation. Exactly what I needed. I just now need to research if you can do multiple media queries in one line for example, when it's -landscape orientation with a min-width- it does this.

[@renejacques8288]

I'm on a mac using Chrome and @media screen and(max-width: 480px) doesn't work for me. @media (max-aspect-ratio: 16/9) responds, but I don't fully understand it yet.

[@vamshichoula5871]

@media scree and(){} syntax trying not working. but @media(){} syntax is working lovely!

[@dkashbeauty4287]

Thank you for this. I understood it perfectly

[@sabbirnoyon8400]

Very nice.........

[@sabuein]

Thank you, very helpful.

[@book2nez500]

Thank you so much

[@FelixOkolie_thenewsblogger]

🎉🎉🎉

[@vamshichoula5871]

orientation:portrait w is smaller then h, orientation:landscape then (w is bigger then height ). I Love this. media query always bottom otherwise, problem developer face problem.

[@SweetPeachannel]

you explained slowly and clearly. So helpful ... thx

[@ketan752]

any media query for height? for any particular device. e.g. 1280 X 1024 or 1280 X 960. only for height

[@lambo-ca]

I know what is the difference but always come back to KZbin to watch again.

[@bsranurps]

çok teşekkürler, çok anlaşılır bir video

[@silentxcure]

so i did exactly what you said but mine is not responding. at 1200px, i made a breakpoint to float a text, but for some reason its not executing like yours. I even tried to change the background/font size to see if it would work, and nothing.

[@neoneb6401]

Ever figure this out? Having the same issue

[@AvidAfrican]

just subscribed. Media querry made easy for me thanks from Russia

[@imani828]

How did you open the developer tools???????????? 🤦🏽‍♂️

[@graciam3020]

I've watched quite a few media queries videos and this is my favourite so far. Thank you so much.

[@funnyviddeeoo]

Türkçe alt yazı olsa keşke ..

[@anab8022]

Thanks, your explanation helped me a lot.

[@Rohit_patel230]

After a year watch manny video I got from your video

[@ranenyysoldzha9588]

thank you for this video! was very useful !!!

[@litox06]

Helpful video, thanks.

[@yuriykazmirchuk9641]

Thanks a lot. Useful and clear stuff. Cheers!!

[@touheedkhan9078]

Really helpfull and easy to understand

[@sahilsinha66]

But it not respond in my chrome browser

[@eGalTube]

Great content Cem :) LG aus Dortmund :)

[@cemeygimedia]

Thank you and congratulations for your successful channel! If you visit Dusseldorf some day, please let me know :)

[@eGalTube]

@@cemeygimedia thanks 😊 Cem. Sure I will ping you when I visit Düsseldorf again 🥰

[@eGalTube]

@@cemeygimedia by the way: I just read your few articles on Medium. You’re a great writer too. You have really awesome writing skills. :)

[@cemeygimedia]

sure, anytime! I always wish to meet other KZbinrs and even maybe bring them together. So we can build a community of KZbinrs who lives close to each other. I will soon connect you on insta as well :)

[@eGalTube]

@@cemeygimedia thanks 🙏 Cem. Really nice to hear that 🥰🥰

[@888glory9]

Thank you man👊🏽❤️

[@a.s6074]

great job, thank you !

[@iamdanyaal]

Thank You Sir

[@nuregal7699]

Wonderful

[@ujenbasi9495]

sir how many media query to use to make a fully responsive

[@cemeygimedia]

You mean fluid? Set relative units like % for width. (example: width=100%)

[@makcimenuka7904]

Good explanation thank u.

[@elieshaoda5331]

👏🏻

[@riaddjaid7428]

can we use multiple media queries for example @media (max-width:1300px)and (min-width:1000px){} @media(max-width:999px) and (min-width:400px){}

[@Flonfl0n]

yes you can

[@SAmir-wp5zj]

Veryyy good video...