This is what it looks like on my tablet:
When I inspect remotely in chrome, I see that the body width(600px) is not that of the document, being set by a div with a min-width:1000px;.
How can i get the bootstrap navbar to fill the full width?
You can access the website suphearst.ca
the solution is too simple
just add min-width:1000px; to body
It sounds to me that you are missing the viewport meta tag in your html document. It will fix your problem and render the document after the device scale.
<meta name="viewport" content="width=device-width, initial-scale=1">
You can read more about it here
Related
I want to force browser, to set virtual viewport to a fixed value.
Typically the meta viewport in responsive page looks like:
<meta name="viewport" content="width=device-width, initial-scale=1">
i found a solution to set width to fixed value:
<meta name="viewport" content="width=1200px">
But unfortunately it works well only in chrome. What i want to get is with width lower than 1200 i want to turn on the zooming functionality.
Does anybody knows any other trick to do it?
EDIT
Actually the problem is, that i managed almost all layouts with bootstrap to achieve responsiveness. But client decided, that he don't want this page to be responsive, but make the width fixed regardless of device width and toggle horizontal and vertical scrollbars if needed.
What i am looking for is a realy easy warkaround, to do this without hudge style modifications.
Give this a try in jQuery:
if(screen.width < 1200){
$("meta[name=viewport]").attr("content", "width=device-width, initial-scale=1, user-scalable=yes");
}
I am building a responsive website. However, when I view it in a mobile mode, the content I have is just 50% of the screen and the rest is white space. May I know why?
Also, how can I make my background image of my home screen responsive? Sometimes it is responsive and sometimes its not.I don't know where I am going wrong.
Many Thanks in advance.
Check all the way through the white space for any div elements sticking out. There will be a div that extends the whole way across the page. Once that is altered to be the same width as the other content it will fit to the screen width.
You are probably missing the <meta name="viewport"> tag.
Read more about it here:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Try inserting this one first in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
I created this page based on bootstrap and when I test it with http://www.mobilephoneemulator.com/ the page goes into full-width mode, adjusting to the screen-size of the browser on the phone. However, when I do this on my real IPhone 6 (and also IPad), it does not seem to do this (both in Safari and Chrome) and I'm not sure why. Perhaps this behavior occurs because it automatically tabs into the Username field, thus zooming out? I attached a screenshot:
Try adding the viewport meta to the header of your page. It's quite important for mobile sites to control the zooming:
<meta name="viewport" content="width=device-width, initial-scale=1">
More information is at Mozilla's MDN: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Its because the width is set to 50% because of the class col-sm-6.
Please add col-xs-12 to the div to the make its width 100%
Please refer to Bootstrap's Documentation
Make the class on the parent div 'container-fluid'.
<div class="container-fluid">
Adjust the bootstrap classes to:
<div class="col-sm-12">
Hope this helps.
#John I think the problem Is with the zooming Here, add this <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> in the <head> tag, That should do the trick!
I'm trying to make my site more "responsive" on mobile devices.
http://healthybodyguru.com
I've tried a lot of variations of the "viewport" meta tag, which is currently:
<meta name="viewport" content="width=device-width, initial-scale=1" />
But for some reason on my HTC Vivid, the page loads quite zoomed in:
Any ideas how I can adjust the viewport so the page is 100% visible on my Android?
Maybe try something like this:
<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1"/>
I'm still trying to understand the viewport to be honest. But I think, I maybe got it now. The viewport width should be set to the default viewable width of the content. For example: If you just have an <img/> with width: 320px, than the image will be fullscreen if you use the code above.
initial-scale=1
Is causing it to load zoomed in. You can either remove it, or replace it with maximum-scale or minimum-scale (for whatever you're trying to achieve).
This code is working for me great ... I hope it will work for you too ...
// fit the width of screen
myWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
// remove a weird white line on the right size
myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
http://developers.facebook.com/docs/reference/plugins/comments/
It says there that:
The mobile version will automatically show up when a mobile device
user agent is detected. You can turn this behavior off by setting the
mobile parameter to false. Please note: the mobile version ignores the
width parameter, and instead has a fluid width of 100% in order to
resize well in portrait/landscape switching situations. You may need
to adjust your CSS for your mobile site to take advantage of this
behavior. If preferred, you can still control the width via a
container element.
But when I visit my page on the iphone, although I see the "mobile design" of the Facebook Comments, the width of the box is the one I set on the code.
My test page: http://www.santiagosarceda.com/facebook/
This is my code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="fb-comments" data-href="http://www.site.com/3953172" data-num-posts="5" data-width="300"></div>
</body>
</html>
The box allways renders at 300px width.
Is there any problem with Facebook Comments itself? Because a few days ago everything was working ok.
Thanks for reading!
The Facebook Comments generates inline style that has changed and the following CSS seemed to override the inline SPAN CSS for me to make Facebook Comments Fluid Width
.fb-comments, .fb-comments span[style], .fb-comments iframe[style] {width: 100% !important;}
I hope this works for you.