Siddharth Pandey Siddharth Pandey - 3 months ago 21
CSS Question

Not able to make bootstrap responsive design work with dotnetnuke

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

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">
Comments