I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode, and also when rotated to landscape. However, when rotating back to portrait the page seems to shift left, or not zoom correctly, and there is a strip of white space down the right-hand side. This white space also seems to be present on first loading in portrait as the user can swipe the page left
Rather than complicating the explanation any further, here's a link to a sample page where this behaviour is occurring. Have a look on an iPhone, then have a look at the home page which does not have this issue.
If you need to see anything further, just me know :)
Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.
To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.
I had the same problem, I fixed it by setting:
html, body { width:100%; overflow:hidden; }
This problem occurs when width of any division is greater than the width of iPAD's screen.
In my case, some divisions were having size of 1000px, so I just went for width:auto and it works. overflow-x:hidden also does the same thing, but is not a preferred way.
I don't have an iphone to test this on but I have come across something similar with websites I've created in the past. In my case its because there was a bug in safari mobile that messed with the scale when going from port to land.
The following code fixed it for me (can't remember where I got it from at the moment)
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
Using "overflow-x: hidden" solves part of the problem, but screws the scroll, acting with strange behaviors (as Jason said).
Sometimes, the hardest part is to discover what is causing the problem. In my case, after a few hours, if found that the problem was in Twitter's Bootstrap:
If you're using Twitter's Bootstrap with "control-group" zones for your forms, the problem could be there. In my case i solved the problem with:
.control-group .controls {
overflow-x: hidden
}
Now the white space on the right was gone :)
I'd like to add to Navneet Kumar's solution because it worked for me. Any div tag styled with width=100% cannot also have left or right padding. The mobile browsers (I noticed the problem on iPhone and Android devices) interpret the div as having a width greater than 100%, thereby creating the extra space on the right side. (I knew this regarding fixed widths, but not percentage widths.) Instead, use width=auto in conjunction with padding.
I know it's a while since this topic was opened but I came across a similar situation and found it was because I had an element with the following properties right: -999999px; position: absolute; hidden off screen.
Changing the above to left: -999999px; position: absolute; solved the same issue the OP had (white screen to the right and ability to swipe right).
I'm using Bootstrap 3.3. I tried all of these solutions, and nothing worked. Then, I changed my <div class="container"> to <div class="container-fluid"> in the section that I was having trouble with. This solved the problem.
I tried all what has been suggested here, nothing works. Then I've relized that it connect with scale of page. So then I added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to header.php in my main theme's folder and it 's fixed problem.
Seems as though results are varying for different circumstances but a sitewide
html, body { width:100%; x-overflow:hidden; }
seems to have worked for me!
Fixed!
Had a similar problem. Fixed it by setting the width to a current device width.
body, html {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
}
SOLVED ¡¡
Since installing protostar joomla template 3.X and start adding content in the module K2 I noticed that annoying scroll with a blank space on the right side, visible especially in iphones.
A correct partial answer was gave for Eva Marie Rasmussen, adding to the body tag in the file template.css these values:
width: auto;
overflow-x: hidden;
But this solution is only partial.
Search div class or label that is causing this problem and once detected add to that class in the file templete.css the same values:
width: auto;
overflow-x: hidden;
In my case add to the class "span" these two lines to finally look like this:
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;
And it´s working now¡¡
Related
I am creating a mockup for a new UI using Angular and Material design elements, however I am experiencing trouble attempting to get the area underneath my toolbar to take up the remaining vertical height of the page.
Here is a link to my code example
I have Googled the problem and the only thing I have seen is the solution to set
html, body {
height: 100%;
}
However I have not found this to be a solution.
I was thinking of perhaps using a flex box, but I am unfamiliar with how they are used.
Any help would be appreciated.
UPDATES & SOLUTION
I opted not to go the flexbox route as I was wanting something quick as a solution and flexbox can be something I look more into in the future.
After deciding that I wanted a static nav bar, of which was not occurring when first coded, I set upon using a CSS calculation to utilise height: 100vh and subtract the overhang that this caused.
mat-sidenav-container {
height: calc(100vg - 64px);
}
I found however, that when shrinking the size of the window, the responsive nature of the material elements meant that the toolbar would reduce in height somewhat. This led to a blank bar below the page content as the amount to subtract would need to be less in this situation.
The fix for this was to add an #media change for the specific page width the shrinking is triggered. I was then eventually left with the following:
mat-sidenav-container {
height: calc(100vh - 64px);
}
#media (max-width: 600px) {
mat-sidenav-container {
height: calc(100vh - 56px)
}
}
This may not be the best solution for the problem, but so far I have found this to be one solution that works.
Ok, here is what worked for me in with the code you gave me:
I added the style="height:100%" to the following classes:
html, blitz-app, to the secondary div and to the mat-sidebar-container
Edited: Changed the style of the html tag to: height:calc(100% - 64px);
Reason: the 64px is the height of the toolbar
I added it all in the chrome browser debugging console, because I couldn't find the actual classes the code is using, but I am sure you can :)
Hope I could help.
I'm trying to make my wordpress site always display with 100% width. My wordpress-css has no mobile specific css. When I visit the site on mobile, the site is not longer 100% width, despite the css saying that it should be. I'm currently testing stuff in the css and therefore not linking the site.
EDIT: I now tried removing all width-specifications in the entire css, the word "width" is not present anywhere in the css. The html still locks to exactly 320 pixels, same as the width specified by the iPhone4. This could be an issue with wordpress and not the css file.
The really weird thing is that if I scale up the window, and then scale it back down, it looks like it should look:
This is the css:
body, html {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
color: #333;
min-width: 100%;
margin: auto;
}
I have the viewport-thing at the top of my html:
<meta name="viewport" content="width=device-width">
However I have not been able to add the "initial-scale=1" into the wordpress html. From what I read I doubt that this is the problem though.
Any suggestions what could be wrong? As a sidenote: It does fail to display 100% width on an actual mobile device as well, it's not just the chrome device simulator failing.
A hint could be that it seems that even wordpress itself misjudges the width of the screen, as can be seen by the wordpress header not filling up 100%
By request of rsn, I will sum up our discussion as an answer. Creds to rsn and everyone else for finding the issue!
In this case, the width itself is set properly. The problem is that things move outside the 100% width and the site tries to scale everything down to fit the stuff moving outside of 100% width. This caused everything else to scale down, including the font size of the text which I thought was an entirely different problem. So, after specifying:
.img {
max-width: 100%;
}
The site worked fine. Except for one last detail, I also has a really long link that, despite having word-wrap: break-word, ended up being wider than the width. To solve this I added:
.long-link {
word-break: break-all;
}
And now nothing moves outside the 100% width, and everything works as it should.
I am creating a webpage with CSS and HTML and I stumbled upon an annoying issue. When I resize my browser window, the background color covers the part of the page that is out of view, on the right side. It sounds a little vague but luckily, I have found a webpage on which this occurs also, here. Dragging the browser window to the left or right of the screen (Win 7 and 8) will resize the page, and when you look at the off-screen part of the page, you can see that it's "covered" with the background color.
I have tried searching the web for a solution to this issue but I find it hard to come up with an effective search term. Hopefully someone here can help! Thanks in advance!
You need to add a "max-width" to the .container, like so (includes current code):
.container {
width: 1200px;
margin: 0px auto;
max-width: 100%; //this is the new line
}
(.container is found in default.css on line 212.)
I have the following issue:
I am making this website... I'm using html and CSS. I've been trying to maintain CSS as standard as possible and checking as I go with the three main browsers: chrome, firefox, and ie. In MY pc it seems to be working fine (with the exception of minor details). However, when other people open it in other screen dimensions , things fall out of place. Does anyone know why this might be happening? take a look at what i'm talking about this is the homepage:
www.britobmarketing.com/ledtogo/index.html
I bet it will be a little unaligned in some of your computers, but in mine it looks perfect. It's stressful!!!
Also, as I was saying, I'm trying to keep the CSS standard so that every browser can view it the same. But browsers like Firefox and ie do not recognize the "round edges" effect on the three buttons I have besides the video. It does work on the rest though, which is what confuses me! Anyone has any idea why this might be happening?
Thank you very much for your time and help!!
This is not an issue of browser rendering engines doing things different.
You aren't taking into account a variable width of the viewport. Your header and footer are centered, and your content is fixed left. So as the viewport gets wider, the header footer stay and the center and slides left.
So for your content, here's the problem:
#indexcontainter {
width: 980px;
height: 390px;
float: none;
margin-left: 170px;
}
In your header, margin: auto is what does the centering, making the left and right margin automatically equal each other. But for the content, you hard code a left margin at 170px.
Change that to use automargins and it starts to work great:
#indexcontainter {
width: 980px;
height: 390px;
float: none;
margin: auto;
}
Url for the unruly site: http://chrism.se
After we put it live we discovered that if the viewport is too small for the content, so as to require scrolling, the background image (body-tag, repeat-x) won't extend beyond the initial view, but I can't for the life of me figure out why and how to fix it. A note to bear in mind is that I didn't code the site by myself, since I'm not that Javascript-savvy and the designers wanted some swooshy effects. My senior colleague could surely find a remedy, but he is unfortunately away and I'd like to wrap this up.
The state of the html and css is the same as when I found out about the issue, but I've tried suggestions I've seen on similar questions, mainly revolving around min-width. I don't really understand the difference between background is only as wide as viewport? and my problem?
Full view = i.imgur.com/6aDpN.jpg
Problem = i.imgur.com/X6JVp.jpg
IE does not support min-width so you can use an expression to do the same:
body {
/* fix for most browsers, fill in desired width */
min-width: 1000;
/* IE Version, fill in desired width equal to the min-width, second value with 2px less */
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}
The closest thing to a working solution I could find was to from #bodyCurrent, #bodyNext:
Remove right: 0.
Add min-width: 1349px.
Looking again, maybe that's good enough.
Tested in Firefox only, using Firebug.
I realize I'm way late to the party, but I ran into the same problem and added a min-width to the body to fix this problem. Since the link you provided still has this problem, I assume you may want more advice. The min-width of the body should be at least as wide as the viewport when horizontal scrollbars appear.
It's easier to see what's happening if you make your viewport small enough for scrollbars and use Firefox's 3D view to see the page. Then you'll see that your region-footer is set to take 100% width of the body element and that the background works fine; however, the body itself is smaller than the overflow from the top part of the page so you get that cut-off looking area when you scroll. So make the body element have a min-width as large as the overflow from the top part of the page and you'll be all set. This is a pretty common problem (I even noticed it on mailchimp for a while).
Add this to the background of div#wrapper:
background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;
Tested it in IE7:
html, body {
position:relative;
overflow:hidden;
margin:0 auto !important;
}