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).
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">
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">
Make sure responsive CSS(responsive.css) is included after basic not before.
Related
I built a site using HTML, CSS, and Javascript. It has two layouts I would like the site to choose automatically using the screen size. To do this, I linked to two CSS files in my index file. Here is how I formatted it.
<link rel="stylesheet" media='screen and (min-width: 750px)' href="css/largeScreen.css">
<link rel="stylesheet" media='screen and (max-width: 750px)' href="css/smallScreen.css">
This works on my computer when I change the size of my browser window. However, when I uploaded my site online and accessed it with my phone, I realized that it doesn't pick the correct layout (should be from the smallScreen.css file).
If anyone can help me with this issue, it would be greatly appreciated. :)
Like #ThomasAltmann said, have you set
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in your <head>? I came accross this issue that had me stumped for hours before realizing I forgot this tag. This tells mobile browsers not to automatically scale the website to display it as if it were on a normal desktop-sized window.
I've created a test site. I've used media queries in css but when I load the page on mobile, I don't see the mobile version and when I re-size the browser the site is responsive. I've read at multiple places to not to use *-device-width. So, what am I missing? What could be the resolution?
Add this to the head of your website:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will set the width of your page to follow the screen width of your device.
It was my mistake. I used javascript to override meta tag and it was causing issue in proper responsiveness. Fixed javascript.
My ASP.NET desktop website works great on a desktop or laptop, the layout however doesn't adjust correctly on a mobile device. I've tried referencing Bootstrap in a link in html but it doesn't change it, I do have bootstrap.css in my Content folder and bootstrap.js in my scripts folder. I used a Blank Template to start my project as well. any advice would be appreciated! Thank you!
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your ASP.NET application</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
Bootstrap CDN
The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links.
Did you use bootstrap 3
Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.
To ensure proper rendering and touch zooming, add the following tag inside the element:
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
What viewport do I need to add to the viewport meta tag in order view a desktop version of a mobile site while browsing?
This is a very old question but the answer might still come in handy.
To view a desktop version of a website on a mobile, just remove the tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
from the <head> </head> section of your html code.
For a responsive design use:
<meta name="viewport" content="width=device-width, initial-scale=1">
This has been taken from Web Tuts Plus, who have a full round-up of the best practices, when using this meta tag.
Obviously, this will only work if you have a responsive design (i.e. a fluid percentage based grid, and media queries).
I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Microsoft- 640 it's not responsive to the mobile view.[Website working fine in all devices except Windows phone]
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class.
Refer url: http://getbootstrap.com/css/#images
I think that you may be missing in adding the meta viewport tag in the index.html. The meta viewport is defined inside <head> tag like this :
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
For more information about meta viewport, you can read this article from w3school. Hope it helps