Media Query in CSS [Easiest Way] | How To Write Media Queries FAST

🗒️MY FAVORITE TOOLS & GEARS
Height Adjustable Desk - amzn.to/42qPZkb
Old Desk in Budget - amzn.to/3UlaFbm
Favorite Laptop - amzn.to/3OrqmKa
LG Monitor for Productivity - amzn.to/3uqA5tv
Silent Keyboard(Loved It) - amzn.to/3UjagGv
Mouse & Keyboard Combo - amzn.to/3Sq50hs
Extra Large Mouse Pad - amzn.to/48Nhcjv
Sony Headphones - amzn.to/3HHjYed
Cheap Earphones for Editing - amzn.to/48eBykN
Daily Use Laptop Stand - amzn.to/3Uj8JQL
Mini Speakers for Consuming Content - amzn.to/48YgAaK
Mport X Connector - amzn.to/3UoHsML
Mic - amzn.to/48eCrtD
3 Color Lightbar - amzn.to/42qgaaW
Dual Monitor Stand - amzn.to/48Nixa1
Stop Watch for Productivity - amzn.to/3Un1RBW
Dotted Diary - amzn.to/3vYBWq1
🤩Access the Full React Course - www.udemy.com/course/the-ulti...
🚀Access REDUX Course:- www.udemy.com/course/the-ulti...
Learn Media query in CSS with Easy and Simple Way. In this CSS tutorial, I will show you how to write Media Query, So you can create Responsive Websites. One Important thing about Media Query is “Always write Media Queries at the bottom of your CSS file”
Download Media Query Guide : drive.google.com/file/d/14I9j...
Topics Cover in this Tutorial
- What is Media Query?
- Why we need Media Query?
- What is Responsive Website? [With Example]
- How to write Media Query?
- How to use Chrome Dev Tools?
Overview
00:00 Introduction
00:17 What is Media Query?
00:49 Creating Simple Example
03:45 How to write Media Query?
If you want any other Tutorials, You can Comment below. I will Try to make tutorial on that topic 🙂
Video by DMC Filmes: www.pexels.com/video/man-brow...
Video by Jack Sparrow : www.pexels.com/video/a-man-us...
Social Media Links:
🚀COURSES : www.udemy.com/user/code-bless...
🤩INSTAGRAM : / code_blessyou
💙FACEBOOK : / 100077716056158
🐦TWITTER : / code_blessyou
😎LINKEDIN : / code-bless-you-5b76822b
Tags
media query in css,media queries responsive web design,css media queries,media query css,media queries,css media queries responsive design,media query,css media queries full tutorial,css media query,media queries tutorial for beginners,css media query min and max,css media query tutorial,media queries tutorial,media query tutorial,media queries css3 tutorial responsive,media query in css tutorial,media query width,media queries css3 tutorial

[@Bhagbe]

Straight to the point.

[@CodeBlessYou]

❤❤❤

[@INAYAT_55]

Good simple short and point to point 💯🔥

[@CodeBlessYou]

Thanks for this comment😀❤

[@dashingboidash1103]

thank you so much this tutorial is so comprehensive

[@CodeBlessYou]

Thanks for watching❤❤❤

[@Smiley-vp4ro]

very well explained and easy to understand. Thank you so much

[@CodeBlessYou]

Welcome and Thanks for this comment❤

[@saffron2965]

such an amazing explanation skill! thanks a lot and keep it up!

[@CodeBlessYou]

Thanks for your Feedback😀

[@abinashmandal6202]

God bless you for explaining so well

[@CodeBlessYou]

God bless you too Thanks for your support😀❤

[@user-lc8oz1dg6t]

I LOVE how you explain it. Clear and Simple👍

[@CodeBlessYou]

❤❤

[@vincentyap6376]

​@@CodeBlessYouwhat is your IG idol

[@indumalipeddi5575]

Thank you for the crystal clear explanation 🙂

[@CodeBlessYou]

❤❤❤

[@Kishorbeere]

Excellent. no lag, only points .

[@CodeBlessYou]

❤❤❤

[@jaxsriv1052]

Bhai who are you and what are you, from last 5 days Yoh have solved like ever single problem of mine regarding front end. Kudos to you

[@CodeBlessYou]

I just want to help others... BTW Thanks for Commenting, It means a lot to me❤

[@SadhviKesarwani]

Bro you are really amazing. thankyou so much ☺️☺️☺️☺️☺️

[@CodeBlessYou]

Grateful for your support❤❤

[@vivekyadav2566]

you are gr8 ..it simply class langauge to teach

[@CodeBlessYou]

Thank you so much for your support❤❤❤

[@yusufalhaji8275]

thanks for the clarification 👍

[@CodeBlessYou]

❤❤

[@vibes1667]

Thank you 🙂🙂 it's very very helpful

[@CodeBlessYou]

Grateful for your feedback❤❤❤

[@mkamranusmanipk]

thanks for the best explanation of media query.

[@CodeBlessYou]

Thanks for your support. Really grateful for that❤❤

[@mkamranusmanipk]

@@CodeBlessYou Welcome

[@DeepakGupta-hj2dv]

Can you make a video React unit testing

[@mightydawnweb]

Great explanations! Thank you! And how do you set up VS Code to do those awesome keyboard shortcuts? I need that!

[@CodeBlessYou]

I didn't set anything for shortcuts. They are made by VS code❤❤

[@mightydawnweb]

@@CodeBlessYou Oh, because I tried doing it in my VS Code and it didn't work. There are so many ways to customize VS Code so maybe you've got some extension or something that makes it work. I'll google it and find it. Thank you! And thank you for your tutorials!

[@CodeBlessYou]

You can watch my VS code extension video on my channel. You will get all @@mightydawnweb

[@sereneflatun]

Thank you

[@CodeBlessYou]

❤❤❤

[@cyblixdcode]

Thanks, I learned alot from this. please, what is the name of the extension you used.

[@CodeBlessYou]

Which extension? For theme I use AYU Mirage

[@zameerahmed1775]

good explanation .......

[@CodeBlessYou]

Thanks😀

[@soojn0072]

THANK YOU SO MUCH, IT WAS SO WELL EXPLAINED!!

[@CodeBlessYou]

My pleasure, Thanks for comment❤

[@dance_j]

I wrote media queries for xxl screens by keeping laptops setting scale 100% . Now for resolution 1920*1080 its working properly on 100% scale but if I change scale to 150% or 125% then main model of my login page is going down, how I can fix this?

[@CodeBlessYou]

You can use Position fixed for fixing elements.

[@sumantadas8216]

Mast explanation

[@CodeBlessYou]

❤❤

[@williamkakooza4603]

Thanks

[@CodeBlessYou]

❤❤

[@jorgeberruete4537]

I tried using this method and I’m having trouble to show display: block in media queries and this is how my code would be setup .example-class { Display: flex; } @media screen and (min-width: 480px) { .example-class { Display: block; } }

[@CodeBlessYou]

Try to inspect using chrome dev tools... If you still face same error, You can contact me on Instagram :)

[@bunyameennurudeen173]

Very useful and helpful. Thanks. can you please make a video to explain the concept of min-width and max-width in regards to media query. like the behaviors of each

[@CodeBlessYou]

Sure I will, Also right now I am working on HTML and CSS Master Course (10+ hours)... But It takes a lot time in filming, editing and all this things. But I will try my best to complete that as soon as possible :)

[@fulltomasti9421]

Bro whin i apply media query and go to live server page box was not visible why

[@CodeBlessYou]

I think, you apply wrong condition for media query.. Try to inspect the page and try to find the box

[@AbuhanifDewan]

thanks

[@CodeBlessYou]

My pleasure 😀

[@ispahan5842]

nice video!

[@CodeBlessYou]

Thanks for Comment😀

[@apurvakoli746]

Hey brother. I had a request. Can you please make a video on "vertical three-dots", "⋮" like how to make it more effective? As we see in various web pages. For example, the three dots in the Flipkart website are at the top-right corner. Consider in Flipkart webpage, as we hover over it, the options are displayed even the options div part goes in another div. So can you please help with this.

[@CodeBlessYou]

I will make tutorial on that but it takes time to upload

[@apurvakoli746]

@@CodeBlessYou Yes I'll wait for the video. Thanks.

[@asrar3894]

Hello, Can you tell me is Media Query a class or not?

[@CodeBlessYou]

No Media Query is not Class. We define styles inside media query

[@r.zaheerofficial5278]

copy from code with herry.

[@CodeBlessYou]

@CodeWithHarry is inspiration for me brother❤

[@ausafali945]

BUT HOW TO FIX OUR WEBPAGE WITH SAME HEIGHT,WIDTH AND OTHER PROPERTIES ON EVERY DEVICE, LIKE PC,LAPTOP OR MOBILE,TABLETS HAVING DIFFERENT SIZES? KINDLY MAKE A VIDEO ON IT

[@CodeBlessYou]

I will

[@ausafali945]

@@CodeBlessYou kindly as soon as possible

[@Kishorbeere]

Subscribed 😅

[@CodeBlessYou]

❤❤

[@vincentyap6376]

I need help

[@CodeBlessYou]

Which help