11

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).

KKS
  • 3,600
  • 1
  • 27
  • 54

3 Answers3

39

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">
Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • Hey Andres, you are right, I forgot to include that in default.aspx. – KKS May 22 '12 at 11:31
  • I am getting horizontal scrollbar! How can I remove that? – KKS May 22 '12 at 11:50
  • 1
    @SidP dont have a mobile device on hand to test but one of your elements is probably overflowing your main container. A quick fix would be to add `body { overflow-x: hidden; }` in your stylesheet to hide that horizontal scrollbar but a more proper fix would be to hunt down that element that is overflowing. – Andres I Perez May 22 '12 at 12:25
  • Thank you so much for this question & answer. I've been struggling with this for the last 4 hours. :D – Farhan Mar 28 '13 at 10:56
  • Thank you so much! Really helps me, been frustrating for a while. Amazing – AlbertSamuel Jun 11 '15 at 14:59
10

I just notice something interesting and want to share it, maybe it will help someone. In the site header section you should include first the bootstrap.css and only after that the bootstrap-responsive.css because obviously the responsive.css depends on the the bootstrap.css

Of course the meta tag should be also present.

<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />  
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Zdravko Georgiev
  • 101
  • 1
  • 2
7

Make sure responsive CSS(responsive.css) is included after basic not before.

Saran
  • 388
  • 1
  • 4
  • 16
Sergey Metlov
  • 25,747
  • 28
  • 93
  • 153