5 Reasons Why Your CSS Media Queries Are NOT Working (Meta Viewport Tag, Landscape, and More)

Why your CSS Media Queries are not working? CSS Media queries are an important part of Responsive web design but sometimes they don't work as we expect or they don't work at all, so in this video, I will show 5 common mistakes that developers make while using media queries and suggest you guys solutions for that.

What are Media Queries?
Media queries are basically a special type of CSS keyword which are being used to adapt the necessary styling rules for any kind of devices like mobile phones, tablets, and many others as well.

SECTIONS:
(00:00) -  INTRO
(00:20) - What are Media Queries?
(00:44)  - #1: Always Add Meta Viewport Tag
(02:44)  -  #2: Don't Use the !important tag & inline styling
(03:42)  -  #3: Add Media Queries at the End
(04:14)  - #4: Use The Right Syntax for Media Queries
(04:35)  - #5: Learn Orientation: Portrait vs Landscape

#css #mediaqueries #responsivedesign #webdevelopment

[SumitKumar-jepr]

Thanks man, you saved me. I accidently linked the media query css file before the style.css and your 4th point made it clear to always include it at the end. :)

[ashutoshv]

thank you man I wasted my whole day on fixing this stuff. :)

[aebek]

I used to write my media queries at the bottom but for the code I am writing now, I wrote it at the top and I was angry about why didn't work. I watch your videos and I understand why it is not working . thanks for the video. it is really helpful

[shannonmerchant]

Opened this video after scratching my head for 3 days. The first tip was the problem. Thanks!

[iamtsquare]

This video saved many lives, I am one of them, My frustration level was 99 before I found it.

[billionairelifestyl.e]

Thanks for this. I was in frustration whole day, finally got the solution.

[bedirhanozcan]

I'm browsing for coding solution and a man with Turkish accent tells me how to solve. Gosh, finally.

[ABHISHEKS-pepw]

the biggest blunder i did was placing media query somewhere in the center thank you for pointing it out sir

[Собственник-тк]

Thanks dude, i waste 10 min on this problem and you helped me for 1 min

[muhammadsaad]

!important;


worked for me.. Thanks a lot. I was stuck here for half an hour.. Cheers!

[yasircesmeci]

After 30 minutes work, i found what is my mistake on your video. Thank you

[introvert]

Thank you so much sir.... i have just wasted 1 and half hour to solve this....

[shivamraul]

I literally was about to breakdown for that simple shit.. thank u man❤❤❤

[luciu]

Oh my god, I love you man, I was so happy when I found out what mistake i've made haha

[iiinicky]

Thank you so much!!! I spent two days trying to get my media queries to work

[harshvarmora]

Thank you so much bro i tried for 3 days fixing this stuff, finally found your video 😁🙌🤙😇

[biswajitmahato]

Thanks bro i just spend my whole day because if this issue😂😂

[sumitsihag]

Thanks bro.
Finally I can move forward
Without any tention in mind about media query.
Thanks

[aiz]

I am facing an issue where a specific width mentioned inside the query fails to apply the css and takes the css of the next larger pixel width query. (have added !important as well still facing same issue). Please advice.

[pratyushm]

Thank you so so much I was using my media query in the middle of my file which is why it was always overwritten by css below it.