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!
Related
I just create grid based on mobile first (old style, not using flex). When I try my result, the width of element when on mobile is not work, it overwrite width from min-width: 768px. Here is the image
I've tested it on other element, and it's not have problem. Check out this image
why it's have different result, I'm using same css. Please help me :)
I guess you have missed meta tag in head tag which specifically tells browser to take media queries css :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
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
Here is my website, www.offergrind.com
I made it fully non-responsive but the problem is that if we view it in mobile it is displaying the top left part.
Is there any code such as
<meta name="viewport" content="width=SITE_MIN_WIDTH, initial-scale=1, maximum-scale=1">
What should i do to make the website to display fit in mobile view ?
Start with this. At minimal, it will make your website fit the device, but everything will be sized down.
<meta name="viewport" content="width=device-width">
You should also look in CSS pre-processors, I was blown away by how many CSS files you reference.
I would get rid of the viewport meta tag altogether. If your website was not designed to be responsive, it will only make things worse. See this for more:
Stop using the viewport meta tag (until you know how to use it)
Use the below meta tag for your website
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
The meta tag above explains everything:
width="device-width" width of the website is equal to device width
initial-scale=1.0 means the website will not scale to fit the device screen
when we set minimum-scale=1.0, maximum-scale=1.0 and user-scalable=0 means user will not be able to scale the webpage (it will turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. )
I have my site :
www.emantiss.com
And when Im resizing the site the main image on the top not resizing with the site it self.
Just when im doing a refresh to the page the new size get in action.
Im trying alot of things with max-width and this code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
but it doesnt work for me.
If some1 can help me. it Will be great.
If you want images to be sized according to the size of the browser window you have to use relative value, i.e. percentual values. You can use media queries in your css file to limit this behavior to windows not until a certain size.
This is one quick way of doing it provided you are using the <IMG> tag:
CSS
.container{max-width-500px;}
.container img{width:100%;}
HTML
<div class="container">
<img src="YOUR-IMG-URL" />
</div>
I am trying to use foundations hide-for-small class to hide my navbar on mobile. It doesn't appear to be having any affect. As far as I understand
<h1 class="hide-for-small">Hidden on Mobile</h1>
should show the element on my computer, but hide it on my iPhone.
What am I missing?
It turns out it was a simple mistake, I left out my viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>