Not able to make bootstrap responsive design work with dotnetnuke

Question

I have used twitter bootstrap in my project with DotNetNuke. I did my designing and layout using HTML, CSS, bootstrap. The responsive design was working fine when I tested it on different mobile devices and even if when I resize my browser window.

As it was working well, I converted the design to DotNetNuke Skin. Now, the responsive design works fine only when I resize the browser window and not on mobile devices. I understand the flow in which DNN loads stylesheets and I have followed it. I have made my skin.css as a combination of bootstrap.css and followed by the content of bootstrap-responsive.css

I am not able to find the problem as if I use the same skin.css with my html, it works fine but it doesn't work with DNN (on mobile devices).

Answer 1

You're missing the meta that targets mobile devices for proper scale. Insert the following in the header of your page:

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