CSS Media Queries | Sigma Web Development Course - Tutorial #31

Access the Sigma web development course playlist: • Sigma Web Development ...
➡️ Source Code: github.com/Cod...
➡️ Notes and CheatSheets: www.codewithha...
➡️ English Subtitles are now up for all the videos!
►Checkout my English channel here: / @programmingwithharry
►Instagram: codewithharry
Download UltraEdit Trial for Free: bit.ly/UltraEd...
python, C, C++, Java, JavaScript and Other Cheatsheets [++]:
Playlist: • Coding CheatSheets 🧾 b...
►Learn in One Video[++]:
Python Course with 5 Projects: • Python Crash Course in...
Python[15 Hr]: • Python Tutorial For Be...
Python Advance[3.5 Hr]: • Python Programming Cou...
Python[1 Hr]: • Learn Python In Hindi ...
Python[2 Hr]: • Python Tutorial In Hin...
Python[15 Min]: • 15 Minute Python Tutor...
JavaScript[1 Hr]: • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial...
php[1 Hr]: • Learn Php In One Video...
php[2.3 Hr]: • Php Tutorial for Begin...
php[Project]- • Login And Registration...
HTML[30 Min]: • HTML 5 Tutorial For Be...
CSS[8.5 Hr]: • CSS Tutorial In Hindi ...
CSS[1.4 Hr]: • CSS 3 Tutorial For Beg...
Wordpress[3.2 Hr]: • How To Make a WordPres...
Angular[2 Hr]: • Angular Tutorial in Hindi
Java[2.3 Hr]: • Java tutorial in hindi 🔥
Web Scraping[1 Hr]: • Web Scraping Tutorial ...
MongoDB[2 Hr]: • MongoDb Tutorial For B...
Numpy[1 Hr]: • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tu...
Linux[1 Hr]: • Linux Tutorial For Beg...
JQuery[1.1 Hr]: • jQuery Tutorial For Be...
Git and GitHub[1.1 Hr]: • Git & GitHub Tutorial ...
►Complete course [playlist]:
React: • React Js Tutorials in ...
Python- • Python Tutorials For A...
OOP Python- • Object Oriented Progra...
Java: • Java Tutorials For Beg...
JavaScript- • JavaScript Tutorials I...
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials I...
C++- • C++ Tutorials In Hindi
Git & GitHub- • Git and GitHub Tutoria...
Android Dev- • Android Development Tu...
Python GUI- • Python GUI: Tkinter Tu...
Web Development- • Web Development Tutori...
Python Django: • Python Django Tutorial...
Projects Using HTML, CSS & Javascript- • Projects Using HTML, C...
Data Structure and Algo: • Data Structures and Al...
Follow Me On Social Media
►Website (created using Django Rest & Angular): www.codewithha...
►Facebook: / codewithharry
►Instagram: / codewithharry
Twitter: / codewithharry
Comment "#HarryBhai" if you read this 😉😉

[@user-et5cx1cr7i]

6:10 The secret reason why Harry bhai uses 344 is just ki vo aalsi hai aur ye keys pas pas m hai….
Isley sb time bachao, aur #SigmaBatchOP krdo😂❤

[@uddhavraj9791]

saari baate ek traf.
VDO end hone k bd ki jo music hai n. earphones lgaa k VDOs dekhta hu.
Mzaa a jata hai.. OSM h bhai
🔥🔥🔥🔥

[@pratikkumarsingh8114]

maza aa jata hai , fir se energy level high , full of enthusiam!!

[@Varad_Govindu]

6:13 - Numbers 3 and 4 were close to your hands and henceforth for the height, you typed '344px' and it is the exact opposite for Numbers 2 and 9.

[@jeeaspirant9697]

what does the second part mean ?

[@cinematiclife5896]

Thanks! harry bhai you are really lord ....Keep this continue .we people are behind you and we will support you till end

[@elonmusk23213]

where u r from bro

[@mtrvansh]

@@Quester2023-xp7rb 2 rs nahi hai, anpad ki aulaad hai kya

[@xyzmasoodofficial]

​@@Quester2023-xp7rb bahi ye 2 rupees nahi 2 euro hai

[@yashtiwari7312]

@@Quester2023-xp7rb gawar 2 euro hai 2 rupay nahi

[@cinematiclife5896]

Jammu & Kashmir India . Abhi Europe mein hu @@elonmusk23213

[@Stark7_World]

Congratulations for completing 1 month of #Sigmawebdevelopment course 🎉🎉

[@priyanshutrivedi2357]

❤Literally... No one can beat harry bhai in the matter of consistency.....
Posting one video daily for approx 100 days is insane....
❤❤❤❤❤

[@shahriar_tamim]

Congratulations to 20k that learners , who're consistent in Sigma Web Development Course. And thank you Harry Sir

[@xeno-m1194]

Harry bruh ❤❤🎉
Thank you for your incredible, free CZcams content. Your tutorials have been invaluable on my coding journey. Your dedication to teaching is greatly appreciated.

[@alqamazain4494]

Thank you Harry Sir for your incredible, free CZcams content. Your tutorials have been invaluable on my coding journey. Your dedication to teaching is greatly appreciated.

[@hemenlahkar]

5:45 div.box*3 likhke enter karne se 3 div with class 'box' ban jayenge, alt+shift+down karne ki jarurat nahi

[@alpha937]

I need bro
Ye batado k mere laptop me toggle device toolbar nhi aarha h to me kia kru

[@SayantanOfficial-jq4mo]

Best web development course ever on youtube history

[@shreyashkotwal08]

Aj pura 1 month complete ho gaya 🚀. Harry Bhai thanks a lot. #sigmabatchop

[@abdulsaboor2004.]

There's a New & easy ways to use Media Queries:
@media only screen and (width greater than [your size]
< smaller than [ your size]
and so on ...
=

[@rupesh_vaghmare]

can we put Width and Height together ??

[@abdulsaboor2004.]

@@rupesh_vaghmare Yes, you can put width and height together in a media query.
@media only screen and (width

[@vaibhav9310]

Thanks bro.. ​@@abdulsaboor2004.

[@krishna290gamer2]

Pin karoge to aapne gaaon aur tau ki zamin aapke naam kar dunga

[@user-vu6is3kz7i]

Nhi

[@nigam_sharma]

😂

[@krishna290gamer2]

Yaar harry bhai...

[@rahulagravat5030]

Ab kar le name pe 😂😂😂

[@bhishek_]

😂😂 harry sir itne asani se dil ya pin nhi karte comment ko

[@misterkhan8780]

Intro is really giving me the vibe!! This course is going to be really great 🗿🗿

[@codewithrahull9636]

This man could have earned millions of rupees by selling this course, yet he chose to keep it free for us. Harry deserves much respect. 🙌
#SigmaBatchOP

[@ayushluthra5081]

harry bhai, left side se folder wali side hata lia karo vscode mai. Thoda easy ho jata hai view.
And you are doing a great job. :))
Also aapki wait kar Raha hu, playlist bookmark karvane ke bahane Milne to aaoge mere ghar😅😂

[@omkarsawant9267]

CSS media queries are used to apply different styles to a document based on various characteristics of the device or viewport, such as its width, height, resolution, and other features. Media queries enable you to create responsive designs that adapt to different devices or screen sizes. They are commonly used in conjunction with CSS to implement responsive web design.
Basic Structure of Media Query:
@media media-type and (media-feature) {
/* CSS rules to be applied when the media query conditions are met */
}
1.@media: This is the at-rule that defines a media query.
2.media-type: Specifies the type of media to which the styles apply. Common values include screen (for computer screens), print (for printed pages), and all (for all media types). The screen type is most commonly used for web development.
3.media-feature: Describes the characteristics of the targeted device or viewport, such as max-width, min-width, orientation, etc..
Media Query play a crucial role in responsive web design by adapting layouts and styles to provide an optimal user experience across a variety of devices and screen sizes.

[@Preet_NIT_J]

Thanks bro

[@syedamahisherazi]

Thank you 😊

[@Ashish...114]

ab apke har logic ko decode krne k liye hi to yaha aaya hoon & by the time we will know the logic behind 344px 😇❤️
#SigmaBatchOp

[@user-mw1pt9xg3p]

I also not know the logic he often used 144, 344 px.

[@Ashish...114]

@@user-mw1pt9xg3p same here 🤣

[@28.kartiksharma18]

I am following this course and i am learning many things more than my computer teacher

[@aamish.iqbal01]

Harry, please don't stop giving us quizzes at the end of videos. It helps us challenge ourselves to create something new and increase our knowledge☺☺

[@rajgaming6733]

Is flex box ne saari CSS rok rakhi hai😂😂😂

[@ssrgamer7391]

10:58 bhaii Ghar mat ana. Playlist abhi checkout karke save Kar raha hu.
Btw love your work and dedication man.

[@nitikgirigoswami1198]

#sigmabatchop
harry bhai video ke end me hi kuch exercise de diya kro jisse hme bhi or confidence ayega

[@TejasWasnik]

Tutorial 31 done.✅
SIGMA BATCH OP!

[@sakshamrawat1108]

#Sigma batch op thx to keep this course free waiting for almost 2 hours

[@GAMER-os2jb]

Guys!! If you are confused to follow this course. I am telling you this type of course is worth it. don't confuse just follow this course.
Sigma batch OP
Proud to be Sigma Army.

[@criatvEngineer]

FAV NUMBERS OF #HARRYbhai : 45, 56, 23, 78 AND 89 😂😂😂 AREE YRR 12 MISS HO GYA THA :)

[@chirpy_ashi]

thank you so much for such an amazing content ....we really appreciate and respect your efforts😄😄lots of respect and love for you😊

[@abhisheksingh_26]

Salute to your consistency ❤🙏

[@Thunder_AB-ss1bj]

#SigmaBatchOp #HarryBhaiyaOp apko dkh kr humko bhi excitment mil jati hai bhaiya

[@flyingraven6887]

Harry Bhai ke age koi bol sakta hai kya... HARRY BHAI !!!!! #Sigma Batch Op

[@Stark7_World]

Sigma batch op ❤

[@sc_99gamer61]

"EXAMS ARE NEAR"
"NOTHING IS CLEAR"
"NO NEED TO FEAR"
"WHEN HARRY BHAI IS HERE"
Thanku sir for great explanation
LOVE FROM NSP BSC CS🎉🎉

[@whitemask-Community]

[ CSS 2 --> Media Rule ] then in [ CSS 3 --> Media Tool ] ::::: - For the purpose of making responsive Websites, 'Responsive' in the sense of it's ability to adapt according to the different sizes of devices, the website is being accessed through.
SYNTAX :-
@media screen and (property : ) { css code }
@media only screen and (property : ) { css code }
@media not screen and (property : ){ css code }
Here,
property can be (max-width : 12px), (min-width : ), (orientation : )

[@rajgaming6733]

Hmare ache future ke liye plz aap apni excitement aur consistency bnae rakhe❤😊#sigmabatchop

[@dawoodkhokhar612]

Congratulations for completing 1 month of #Sigmawebdevelopment course

[@starboyZi1]

greatest for a reason, cant believe this is free
thanks dude

[@starboyZi1]

sigma batch OP

[@nareshbohara35]

Tutorial - 31 Done✅
#Sigma Batch OP
Really amazing Course❤‍🔥
Watching from Nepal
Lots of Love Harry Bhai 💚

[@vicky_6565]

East or west Harry Bhai is best ❤❤❤❤

[@AJSTUDIO07]

This guy is a beast, he maintains our energy at high level.

[@BiKe_LoveRs98]

Ye ekdam condition ki trah hai.. if agar ye hua to ye apply higga warna apply nhogga .. that set.❤

[@Muhammadkamran-lp1ig]

Sigma batch is op❤

[@MuskanShaikh-mg9sb]

Absolutely great course given free by harry bhai..... Thank you harry bhai 😊

[@mohammadjakerhossain9929]

Hi sir, thank you for your sigma web development course. I am from Bangladesh. I show you all course. I know hindi but understand hindi. Sir please more use English in your course.

[@user-mw1pt9xg3p]

Yes he does, nice to hear that from Bangladesh people are coming. Harry is a nice man.

[@nivealokhande2153]

abe chup, hindi hi theek hai

[@stutidutta3922]

Tutorial 31:done
Sigma Batch op

[@Hafijur0211]

🎯 Key Takeaways for quick navigation:
00:00 📱 *Media queries are essential for responsive web design, adjusting styles based on device characteristics.*
02:23 📏 *Media queries syntax includes `@media` with optional `only` or `not` keywords, specifying the media type (e.g., screen), and conditions like `max-width`.*
04:52 🖥️ *Example of a media query: `@media only screen and (max-width: 455px) { ... }`, adjusting styles for screens with a maximum width of 455 pixels.*
08:13 🔄 *Breakpoints in media queries help customize styles for different device categories, enhancing the responsiveness of the website.*
09:39 🔄 *Use `orientation` in media queries to targetspecific screen orientations, adjusting styles accordingly (e.g., `landscape` or `portrait`).*
Made with HARPA AI

[@santughosh7934]

lesson toh bohot accha dete ho bhai but thoda jaldi video upload karo bcz i already completed lat 31 videos & now i'm waiting for next video.........😑😑😑😑😑😑

[@aamish.iqbal01]

East or West Harry bhai is best 😎
Proud to be the Student of Sigma Web Development course #SigmaBatchOP
🔥

[@yyyyyyy852]

#SigmaBatchOP 🌟🌟🌟🌟🌟This Course Deserve Millions Stars Harry Welldone Brother

[@ayushmaanraturi]

Tutorial - 31 Done ✅
#SigmaBatchOP #HarryBhai
Thank you ❤ Harry bhai for this amazing course

[@gurkiratsinghghuman9157]

Sigma batch op!❤

[@umairkable]

Hats off to you Harry ! watching from Portugal

[@Podcasting34]

SIGMA BATCH OP
Harry bai kafi Informative course ap ne Upload kia he
Bari Exitment hoti he ap ka mazaq or course dekh kar

[@mdsahilkhan5535]

the quality this course carries with itself is uncomaprable

[@UsmanKhan-rq1yt]

344px isliay k mera bhai genious hone k sath sath boht aalse b hai q k 3 & 4 aaju baaju me he hain...isliay.....love u Harry Bhai from PAKISTAN 😍😍😍🥰🥰🥰

[@sunshine5106]

Love absolutely every part from intro till end. Is it just me or does it get difficult to manage listening him, watching the changes and coding it simultaneously . This might be are the only videos I need to slow down the playback speed ;)

[@moviewalaAya]

Sir aapki har ek video main mzaa ata hai aap ka pdhane ka tarika hi unique hai

[@maazk21]

North to South, East to West
Only and only harry bhai is best
#codewithharry #sigmabatchop

[@MSIUser2012]

#SigmaBatchOP
Best Web Development course and that too, in Hindi. Thank you Harry bhai! Your contributions are priceless.

[@vishallodhi7096]

u r great bhai ......thanks

[@KIRTANGURBANI1313]

Thanks bro to us free of cost how to make a website

[@munnammalik]

Sigma batch OP
bhai amazing method of teaching at online platform ❣

[@premkrrajbhar]

thank you harry sir, your notes is valuable on your blog website

[@fitness_hub135]

WE ARE EXCITING TO NEW PROIJECT

[@southsponge3216]

THANK YOU SOO MUCH...I HAD A CLIENT WHO WANTED A RESPONSIVE WEBSITE AND IT WAS DONE BUT WASNT RESPONSIVE AND I STRUGGLED HOURS FIGURING OUT HOW TO MAKE IT RESPONSIVE AND ITS FINALLY PERFECT!!!! THANK YOU SOOOOOO MUCHHHHHHHH, YOURE A LIVE SAVERR.

[@Sameer-mo7rn]

May i ask how are u getting clients this early? Are you experienced or what?Do tell

[@Dataabc]

I was searching for.your video sir love you from pakistan

[@CodingChannel1]

Very Important topic

[@ayan_433]

6:03 because, 3 and 4 bohot pas hay apasmay, so you use 3 and 4 ❤❤❤❤❤❤❤❤❤❤❤

[@MohdMusrat001]

Sigma batch op Harry bhai ❤❤❤❤❤

[@deepkhatri5648]

This topic i want .so this time the sigma batch is op man .....😊😊😊

[@NOTKRISHNA01]

Harry bhai ke aage koi bol sakta hai kya aaaaaaaaaaaaa harrryyyyyyyyyyyy bhaiiiiiiiiiiiiiiiiiiiiii 😂❤❤❤❤❤❤❤❤

[@user-tc3os2vz8z]

harry bhai sub se phly to apka jo course hy ap koi jis proper nai bata thy or bus ap ikhna start krden thy hu or samjhty kam hu aesa thori learn krwaye jata hai

[@robustedits03]

Thanks Harry Bhai ❤ for giving this quality content for free

[@ShubhVerma-CSE-ENGR]

Sigma Batch OP❤❤

[@cryptohujaifa3729]

Love you harry vhai...please javascript ki course upload do🥰

[@ravikaransingh124]

0:44 Sigma batch op

[@shortsviral359]

Sigma batch op 🔥

[@fizzz0214]

Great Video I am waiting a lot for #media qouries

[@viral_shorts_on1]

Sigma Batch op 🤩🤩🤩🤩 love you harry bhau😇

[@ShamMujumdar-zx3wr]

Sigma Batch Op 🔥

[@sameershahidbutta]

Tutorial 31 done. Sigma Batch OP!!!

[@prohegde006]

Sigma Batch OP
Harry Bhai OP

[@its_deadpool_4454]

thank u so much sir. for making this sigma course. #sigmabatchop!!

[@programmershray5260]

0:38 Sigma Batch OP ❤❤❤❤

[@mayanksharma_WebDeveloper]

Sigma Batch OP.

[@zix6027]

Dear harry bhai ap bohot hi nice ho kamiyabi apky qaman choomy love from🇵🇰

[@ishanchandrakar1928]

SIGMA BATCH OP💯

[@Hari_Goud]

Thnk u Harry Bhai

[@Android-17]

Media query done ✅
#SigmaBatchOP 🔥

[@Mp-ic5dx]

Apne gav aur tau ki zamin was very funny

[@KainatAlviCharm]

Love the way you teach Web development ❤❤

[@KevinLevin-gt5fg]

any number multiplied by 9 will always result in a number whose digits add up to 9. 6:13

[@user-hj4md2gl9j]

need more deatils on this topic......!

[@vivaanyadav1st]

Day 31 Done❤

[@cricket_streaming1]

Query got solved in flash of a time. Thank u Harry sir❤

[@mark_jugarberg]

Thanks Harry For This Wonderful Playlist In Free With Op Qaulity And Qauntity of Videos

[@Abdullah86025]

congradulation for 6M

[@100x_INCOME]

6:55 kyuki 3 and 4 pas pas he

[@FahadAhmed1320]

Thanks Harry bhai❤