Manu Karki Manu Karki - 1 month ago 7
CSS Question

How do I achieve responsiveness?

So this is my test site: http://www.manukarki.com

It is responsive for desktop resizing and online mobile emulations like mobiletest.me but for the real device(my moto G 1st gen) it's not working. Currently the media query for this is

@media only screen and (max-width: 640px)
. Now I also tried "max-device-width" but it changes a little but nowhere near like in screen resize and mobiletest.me test. I really don't want to use bootstrap, foundation, etc. I really want to learn from scratch.

Answer

You need to add a viewport meta tag to the <head> of your page.

<meta name="viewport" content="width=device-width, initial-scale=1">

You can read more on the mozilla developer network

Comments