Get your media queries working with the meta viewport HTML tag

Conquering Responsive Layouts: courses.kevinp...
Our phones assume that websites are NOT responsive, so if you don't tell them that you did all the hard work and set up some media queries, it'll just ignore all that and simply scale your website down to fit.
Using the meta viewport tag, we can tell our devices that we did use media queries and prevent that from happening.
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowel...
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@KevinPowell]

As Treasure Pirate kindly pointed out, I didn't include a comma in my `content` attribute, between the width and the initial scale. Normally you'll have one in there. I missed it, but it worked anyway, so I didn't realize I hadn't included it! I would put it in normally, but it's good to know that it seems to work either way.

[@Ulvis_B]

I have problem when use px but if use % looks better why is this?

[@joeldelpilar3651]

I’ve heard that the browser helps to “fix” broken code/syntax in some cases, maybe this is such case?

[@codinghag7137]

This is cool - I would like all the meta tags explained. Well, at least the important ones and the ones that help with SEO.

[@shahination]

Seriously? I was looking for meta viewport like yesterday. You can read my mind 😂 Best timing ever ❤

[@nuraktar7815]

sometimes its happen... XD it happens too with my subscribers.

[@vaishnav9553]

Every single video is so informative and well explained. Thank you for your efforts Kevin, I really needed your help!

[@BrownOrion-z1f]

I ironically learned how to play 8 melodies trying to remember Marry had a Little Lamb "ya yaaaaa Iets go that direction" Mary: What about my sheep?! "Too baaaaaahd"

[@calebmoughkera-65]

thank you so much mt Kelvin, i have been wondering what is going on with my site, but with your explanation solve my problem.

[@stefanofrontani2220]

You are just a beast. Thank you man.

[@Tijme]

[@gtafan1542]

best meta tag

[@AmaanDevelops]

Thank you. I have always wondered what that means.

[@johncharles4146]

thank you brother for explaining

[@honiel59]

Thanks. Easy to understand

[@jasonthomas9531]

Great explanation. Thanks!

[@seraphcms2511]

Kevin, you're fantastic! I was having this exact issue yesterday!!!

[@nigelpallatt]

Visual Studio Code has this as default. Type "!" or "doc" and hit tab.

[@KevinPowell]

use it in every project, I think it's why I forgot the comma at one point, lol.

[@lbobrov]

Yes, I noticed that too :) Creating my html files with the ! as mentioned above and it's there, with the comma before initial-scale. :)

[@coccinelle891]

This Very usefule vidéo👍 I will join thé 21 days challenge.Thank you Kevin for this short and wonderful video

[@rahuldora1587]

Hey Kevin are you reading my mind 🤔🤔🤔 i am searching upon this topic for 2 days still not able to understand. Thank you for such awesome explanation ❤️

[@MusicRachael136]

All shows fine while the device is in portraits but when turn to landscape the contents shrink in mess.Especially on mobile devices.So how to solve this?

"html5" keyboard shortcut adds this meta for you in vs code :)

[@KevinPowell]

you can just do ! and hit tab as well :)

@@KevinPowell yes it's what I do . Thank you because now I know why this meta is here by default :)

[@michaelgriffiths1982]

Why don't browsers automatically apply this?

[@foy5051]

Thank you for this🙏🏿

[@karanbadhwar9888]

this means that the code we have written with Media Queries won't work until we add this Meta tag, because the browser will Zoom out the Webpage to be the size of the device on which it was made? Just Confirming to see if i got it right?

[@abdelbasset8280]

This is due to the high pixel density of modern phones, and by including the responsive meta tag into html, the hardware pixels will be converted to software pixels or css pixels.

[@NLfrey]

there's a difference between the hardware and software pixels? how do you know what the standard is for software pixels?

[@raba650]

Chromes lighthouse tab on dev tools is flagging me on accessibility for having a maximum-scale=1 on the viewport meta tag. It has a link to this issue saying that I should set it to 5 or greater for the issue to go away. Should I just remove maximum-scale?

[@shahrearferdousfagon8416]

CSS Scroll Snapping!

[@j0hannes5]

what if you want to scale the entire site between certain screen sizes? The desktop version of my site is too big on smaller desktop screens

[@favouritejome]

Hi kevin, I'll like to know when the Conquering Responsive Design course will be closing.

[@techtips4019]

Thanks for explaining that.

[@adriaanmorosan]

May I ask why the meta tags are interfering with flex? When I remove the meta tags the flexbox commands are working fine and everything just fits perfectly even on mobile devices :D?

[@kneekoo]

The Terms of Service and Privacy Policy pages for the course end up on the Podia website, where you're not mentioned or featured, not even in the 9 pages of examples. Can you please clarify this? Thanks. :)

[@SemhalHadera]

Thanks

[@agustinl7499]

what if I go to "desktop mode" on mobile chrome? some things get smaller but others don't : c

[@md.sumonbiswas2272]

Thanks a lot

[@dawdasanneh4177]

Hi Kev!, I'm facing an inverse to the responsive issue. My problem is that i build a webApp for mobile with the help of jQuery Mobile. All is running across all mobile viewports. But when it came to desktop/laptop browser, I've hit a brick wall because all objects are displayed to 100% for the mobile phones and to have the same effect with Desktop/laptop viewports, I will have to heavily pad it left and right such that it will mimic a mobile viewport for it to work. How can I possibly use meta viewports to help.

[@frozen_tortus]

I'm surprised why Layout Viewport vs Visual Viewport concepts wasn't explained here?

[@maria-lm8ze]

Twice i had a problem with my webpage getting a white colunm on the rigth side when on mobile screen size. I remember trying many things to get rid of this white space and I solved by editing this meta viewport like this: initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86 which i copied from MDN docs, but i am not sure what it does and if it was the right way to solve my problem

[@LorenHelgeson]

Yeah, that viewport tag is essentially turning the key in the ignition. You can have the best website design, or the simplest, and the most robust set of media queries. But, you really need that meta tag, or else nothing is going to happen.

[@govarthanankumar.m4475]

[@michaelgalario6655]

Hi, Kevin. While I was starting learning about html and css last year, I remember speaking with someone who advised me about the code below: As advised, I actually added this in addition to the code you mentioned in the video. I also remember that there was this code for apple devices. Will these codes be redundan if added? Thanks heaps!

[@KevinPowell]

You can use the mobile-web-app-capable, but unless it's actually a web app (rather than a regular site), I don't think I would. It allows the site to be installed to the homescreen and be full screen apps... but I don't see the point unless it's actually a PWA.

[@user-px5lo9nc5t]

Could you make a video telling us about the books you have? I see them behind you in a few videos, and I'm curious.. 🙃

[@pro-cr2eo]

Thank you for informative and useful videos! btw what font do you use ? I notice you are using the same font for all of your websites .

[@kc-ep8yx]

thank u

[@Silentanwa661]

hi kev its allajin love u

[@bhagirathsinhzala8961]

Hi all, does anyone know the name of the responsive website design testing tool Kevin has used in this video? TIA

[@waynehendricks1529]

Firefox Developer Tools in the Firefox browser. Press shift + ctrl + i to access it.

[@KevinPowell]

As Wayne mentioned, it's in the dev tools. Chrome has it as well, though in this case I was in firefox. In Firefox, you can do a shift + ctrl + m, even without the dev tools open. In chrome, same shortcut, but you have to be in the devtools.

[@yongliyou1524]

Hi Kevin, i just sign up your "Conquering Responsive Layouts" course today, would like to ask if the video will be automatically closed after 21 days? Can I still go back & watch your video anytime in the future?

[@mtslyh]

What are your thoughts on the "shrink-to-fit=no" viewport content component? Do we still need to add this one for really old versions of Safari (pre 9.2.x) or do you think its time has passed? I also noticed that you don't separate your content values with commas. Most examples that I see have commas between the content "tags/value" entries.

[@KevinPowell]

panic moment on my part there in forgetting the comma, lol. I'll pin a comment at the top to mention that it's normal to have it, but it seems to work without (if it didn't work without, I probably would have caught this before now, lol). Partly might be down to because I pretty much never write it myself anymore, just use emmet to populate the starting template and it's there for me. As for shrink-to-fit=no... I don't think it's very needed anymore. I think we can even drop the intial scale and be safe to be honest.... should do the trick. Though might be worth keeping an eye on analytics to be safe?

[@thecatalyst6063]

Only this single line can make our website user friendly for people according to their device????????

[@hashirattiyedath]

I am a Big fan of you ❤️👌

[@fields827]

Does it mean that this very tag Makes everything in the website responsive 🤷 I can't believe this if it really true

[@shyamfx]

Good

[@syediqbalahmed3176]

vu;u ... ok ...

[@fakefury1198]

First! :)