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

Access the Sigma web development course playlist: • Sigma Web Development ...
➡️ Source Code: github.com/CodeWithHarry/Sigm...
➡️ Notes and CheatSheets: www.codewithharry.com/notes/
➡️ English Subtitles are now up for all the videos!
►Checkout my English channel here: / @programmingwithharry
►Instagram: codewithharry
Download UltraEdit Trial for Free: bit.ly/UltraEdit-CWH
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.codewithharry.com
►Facebook: / codewithharry
►Instagram: / codewithharry
Twitter: / codewithharry
Comment "#HarryBhai" if you read this 😉😉

[@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!!

[@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 🎉🎉

[@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 ?

[@alqamazain4494]

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

[@xeno-m1194]

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

[@shahriar_tamim]

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

[@SayantanOfficial-jq4mo]

Best web development course ever on youtube history

[@priyanshutrivedi2357]

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

[@shreyashkotwal08]

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

[@28.kartiksharma18]

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

[@MuskanShaikh-mg9sb]

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

[@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😊

[@misterkhan8780]

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

[@KainatAlviCharm]

Love the way you teach Web development ❤❤

[@mouzairansari2243]

Congratulations !! Harry Bhai Completing 1 month in Sigma Web Development Course

[@TejasWasnik]

Tutorial 31 done.✅ SIGMA BATCH OP!

[@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😂❤

[@mark_jugarberg]

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

[@abhisheksingh_26]

Salute to your consistency ❤🙏

[@sakshamrawat1108]

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

[@rudraszone]

Salute to the Hardwork of this man🙏🙏🔥🔥 #sigmabatchop

[@robustedits03]

Thanks Harry Bhai ❤ for giving this quality content for free

[@moviewalaAya]

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

[@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

[@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

[@sameershahidbutta]

Tutorial 31 done. Sigma Batch OP!!!

[@maybe_mahdi]

thank you harry vai....such a good episode it is

[@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☺☺

[@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

[@360__Sports]

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

[@jkssharma123]

U are mind-blowing bro🎉

[@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 ... =

[@Whatifhindi]

can we put Width and Height together ??

[@abdulsaboor2004.]

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

[@vaibhav9310]

Thanks bro.. ​@@abdulsaboor2004.

[@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 😊

[@RanaAmerRajpoot]

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

[@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

[@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😅😂

[@Stark7_World]

Sigma batch op ❤

[@nareshbohara35]

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

[@rajgaming6733]

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

[@rajgaming6733]

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

[@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🎉🎉

[@munnammalik]

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

[@abhaymusyuni3735]

Juska mujhe tha intejar ❤😂

[@mdsahilkhan5535]

the quality this course carries with itself is uncomaprable

[@CodingChannel1]

Very Important topic

[@starboyZi1]

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

[@starboyZi1]

sigma batch OP

[@stutidutta3922]

Tutorial 31:done Sigma Batch op

[@vishallodhi7096]

u r great bhai ......thanks

[@Cricketlives2024]

JazakAllah harry bhai❤

[@saieeshnaik7826]

perfect explanation

[@Dataabc]

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

[@sabirpathan430]

Sigma batch OP. Jai ho Harry bhai ❤

[@bobysisodia9025]

That’s great bro❤🎉

[@ssrgamer7391]

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

[@KIRTANGURBANI1313]

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

[@FahadAhmed1320]

Thanks Harry bhai❤

[@salmankhaliq7782]

Amazing Harris Bhai

[@Hari_Goud]

Thnk u Harry Bhai

[@criatvEngineer]

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

[@buggaming21]

Great Video I am waiting a lot for #media qouries

[@Engineering_Unlocked]

thnx bhaiya :) completed on 29/2/24

[@yyyyyyy852]

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

[@user-by6tc9fm1w]

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

[@vicky_6565]

East or west Harry Bhai is best ❤❤❤❤

[@its_deadpool_4454]

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

[@kumailRaza149]

very helpful harry bruh 😍😍

[@cartoondhamaka5897]

thank uou bhai ........ you are great

[@Gayatri_shejule]

Thank you sir 😊

[@harshaliyadav3995]

#Harry Bhai..u r doing the best job....

[@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 ;)

[@artechgiants]

Awesome video 😎 👍

[@SolarSnapShot]

Thank You so Much

[@AradhyaKushwaha231]

Thank you Sigma batch op

[@Aanchal1503]

Best course ever

[@AhmedRaza-ty7zq]

Awesome video😎😎👍👍

[@gurkiratsinghghuman9157]

Sigma batch op!❤

[@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.

[@unknown11188]

Harry Bhai OP!!!

[@manvirtaneja]

Sigma Batch OP ❤‍🔥

[@MrSat001]

Great Harry 👌

[@arjunpatel2384]

#Sigma batch op.... Love u harry bhai❤

[@md.atikurrahaman5793]

Thank you ❤

[@fitness_hub135]

LOVE YOU HARRY BHAI

[@abhishekmathur1042]

Sigma batch is all time OP🔥🔥🔥🔥🔥

[@cryptohujaifa3729]

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

[@vaibhavgirgune7417]

Bhai you are awesome

[@rishabh0100]

Thank u harry bhaiii❤

[@rishabh0100]

❤❤

[@RaghavCoderPY]

Best Course Ever God Bless You #SigmaBatchOP

[@iamstartling]

THANKS YOU ❤❤❤❤

[@KelloDeveloper]

thanks so much!

[@CoDeInTeChNoLoGy]

thanks harry bhai

[@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 : )

[@fitness_hub135]

WE ARE EXCITING TO NEW PROIJECT

[@user-hj4md2gl9j]

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

[@freefiregameply6541]

thanks for free courese and slow upload video

[@Amna05545]

congradulation for 6M

[@Priya-laboni-1234]

Ur God for us ❤

[@fariawaseer]

#SigmaBatchOp #HarryBhai bhot mazak aya raha hn Thank You so much ❤❤🎉

[@aamish.iqbal01]

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