I am a little confused with the behaviour of my Twitter Bootstrap based navigation header. In Desktop based versions everything seems to be just fine, however when browsing from the iPhone/iPad I get a weird white spot on the right (which also seems to define the positioning of the Tumblr controls.
How do I go about debugging this? Anyone have any pointers? Thank you so much.
The actual code lives here http://thegodfounder.com/
Edit 1:
Changing the viewport to "width=device-width, initial-scale=1.0" as suggested by #baptme actually scales the viewport to where the black ends and hides everything on the right. What am I not seeing?
Edit 2:
1) Adding the suggestions of float:left & min-width:100% to body results in actually filling the white space, but there still seems to be something fishy: The Tumblr controls are still there in the middle of the page, and on pageload it loads right to the right of the Tumblr controls, as if there was some break point or so, but I am not aware of any?
2) And am I not getting the concept in using the Bootstrap navbar right, when it's not supposed to be fixed to the top?
replace
<meta name="viewport" content="width=device-width">
with
<meta name="viewport" content="width=device-width, initial-scale=1.0">
EDIT:
I remove the responsive behaviour and the position:fixed from the twitter bootstrap .navbar I end up with the same problem
If you don't want the .navbar to have a position:fixed you can use media queries to avoid the .navbav width to be wider than the viewport.
EDIT 2:
The float: left and min-width: 100% to body from #MyHeadHurts comment is definitely the best way to fix it. Even if I wouldn't expect those 2 properties together to do that, it works.
EDIT 3:
Remove <meta name="viewport" content="width=device-width, initial-scale=1.0"> if you want your page to scale according to the viewport.
Related
https://balancingpaws.net/
Looks great on a basic browser.
However, if I try to load this page on my mobile device, the entire page doesn't stretch to 100% width. There is about 25% blank space on the right side of the page implying it only stretches to about 75%. I've tried many things. Any recommendations? Help? :).
Please try to the following viewport, because yours has an initial-scale=0.41.
<meta name="viewport" content="width=device-width, initial-scale=1">
You should also correct the mark up because has some errors. You can check them here.
I have a site—actually several sites—that when viewed in portrait mode on the iPhone shrinks left. (It doesn't happen in a browser when it's at a small width or in chrome's device emulator.)
Here's one of the sites...
Here's another
This is my viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Any thoughts on what might be causing this, and how to fix it?
you can use overflow-x:hidden in <body> to remove horizontal scroll.
It is caused by the <li> of the <nav>. If you remove float:left and add display:inline you do not even need the overflow-x:hidden in <body>.
I've been developing a website in Rails for a local college as a side project for the past few weeks. It's my first production site in Rails and using Bootstrap to speed development. The website looks fine and all is working great except when I try to access the website from a mobile device. When you first load a page the page appears zoomed in. I'm allowing user-scaling so it's not that big of an issue, just an annoying little quirk I was hoping to get rid of.
It only happens when the page is initially loaded in a vertical orientation. If the page is loaded horizontally it's fine.
Here are my meta tags
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">
Here are some pictures since I'm not overly sure I'm being clear.
Vertical Orientation:
http://imgur.com/guJIG5k
Horizontal Orientation:
http://imgur.com/SNwvPFD
The outcome is the same on my Galaxy S3, an iPhone 5C, and an iPhone 5S
Make sure you add:
<meta name="viewport" content="width=device-width, initial-scale=1">
to your <head>.
Fit the size of browser like a Galaxy S3 horizontal, it looks good?
Winnyboy5's solution probably worked for you because you were not using the grid properly, but note that it's hard coding the size and if using a bigger screen, it won't adjust accordingly to take the space available, defeating the purpose of bootstrap.
To make the viewport work as it's supposed to on mobiles, you have to make sure you have the needed the container div wrapping everything:
<div class="container">
Your other elements go in here
</div>
OR:
<div class="container-fluid">
Elements here
</div>
The only difference with "fluid" container is that it will take the entire space.
Then adding this to your head will work on mobiles:
<meta name="viewport" content="width=device-width, initial-scale=1">
The inner elements of the grid may have a fixed width more than the mobile screen size.
Check the CSS of the elements to find the one with the overflowing width.
You can use media queries to fix the width issue. Like below
#media (max-width: 320px) {
.element {
width: 90%;
}
}
I faced the same issue.
I had the container width in the css as;
.container{
width:640px
}
Changing width to max-width worked for me.
Just testing the responsiveness here by resizing the page to much smaller size in chrome but the menu shifts to the next line http://a-s-team.com/shoploop/index.html
I tried in chrome press ctlr and scroll down. You will see the menu moving to the next line. This would happen in most of the mobile browsers. Any way to fix it?
I think the reason of this is font-size: 12px; Try to to use % insted of px
This is a far from optimal solution, but it does solve the problem: you could prevent zoom altogether on mobile devices:
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->
If you add this to your page and visit it on, say, your iPhone, you can see that you won't be able to zoom.
I'm designing a mobile version of my website, which should be like a mobile application.
The problem is that there is a strange width to my html element in my mobile browser. I have tried setting body and html to width:480px; and the content is 480px but even then there is a lot of whitespace next to the content (estimated at about 300px). The effect of this is also that the website is not zoomed to the content but to the content + the whitespace and you first have to zoom in to properly use the website.
Ofcourse I want to use width:100%; so it renders well on different screen sizes.
Does anyone know what's going on or how to fix it?
Edit
The html code is just straightforward xhtml transitional, nothing special. In the css I have:
body, html {
width:480px !important;}
But if I would not set a width to those it should work right? I also don't set a width for any other elements (other than like buttons 100px and things like that) and if I view the mobile version on my computer no elements seem to be wider than the body.
Have you add the viewport meta tag ?
<meta name="viewport" content="width=device-width, initial-scale=1.0" />