If you look at this website in Google Chrome's developer options, specifically mobile responsive toggle, it will overlap my portfolio section over my about section. I have tried a number of potential fixes from the internet, like changing the "display" and "positioning" in CSS. None of those worked.
As a side note this issue doesn't exist on local environment, only live.
Any suggestions?
P.S. This is a portfolio website. I'm not trying to solicit my information. It's just broken and looks bad on mobile. THANKS!
Well, try to removing the rule height: 100%; from the following classes:
.intro-section
.about-section
.portfolio-section
This solves the overlaping bug. You can still add a media query to reduce the padding-top from all sections. Something like that:
#media all and (max-width: 580px) {
.about-section, .portfolio-section {
padding-top: 70px;
}
}
Hope this can help you.
You can just remove the height: 100% from the body. This will allow the body to overflow, and not to stuck to the window's height maximum.
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¡¡
I am using SquareSpace for the building blocks of my site and creating some custom CSS to fine tune. I'm trying to get the gallery page to display the images with more height. At the moment they are not very big in the slider, especially when viewed on a large monitor, seems like there is a lot of wasted space.
Using Inspect Element, I found there to be some HTML styling the height and restricting it to 500px.
<div class="slideshow strip main sqs-gallery-design-strip rendered: id="yui_3_17_2_1_1441831607164_254" style="height: 500px; margin-top: 203:5px;">
Changing the height from 500px to 600px in Firebug works perfectly, so I tried to apply some custom code to in the SquareSpace site. I used:
.slideshow strip main sqs-gallery-design-strip rendered {
height: 600px;
}
The injection of code did not have a visible result on the page. Am I writing the CSS incorrectly? Is there something I'm missing here? Please help.. Thank you!
Try to clear your cache. Sometimes a cache does not refresh on a server.
To clear it on a site, just hit Ctrl+F5.
Your CSS rule is close. It should read:
.slideshow.strip.main.sqs-gallery-design-strip.rendered {
height: 600px !important;
}
Working on http://thecraftedgarden.net. It has a bootstrap fixed navbar set up.
For some reason the mobile button is off the screen, the navbar is too wide on mobile devices. In order to duplicate the issue you must use a phone android or iPhone or you can use device mode within chrome. It does not occur in chrome if you just size the window down. Its as if the code for the mobile menu is outside all the divs and body if you take a look with developer tools.
I am almost certain the issue is caused by the bootstrap.css style sheet.
Here are some troubleshooting steps I have taken.
I replaced the entire block of code with the code from getbootstrap.com's fixed navbar example http://getbootstrap.com/examples/navbar-fixed-top/, and the issue still occured.
I have a second style sheet additions.css, and I removed all the styles applied to the navbar and logo and the issue still occurs.
If someone could help me identify what I messed up within the stylesheet or help me decide which lines to replace that would be very helpful.
ina a tag <img src="http://thecraftedgarden.tlchatt.com/img/The-Crafted-Garden-Logo.png" class="logo img-responsive">
try to remove
.pull-left {
float: left !important;
}
and set:
.logo {
margin:0;
}
I really can't explain why this is happening but I am building a WP theme in BS3, for some reason, on the tablet viewport (768 to 991px) my links stop working. They are not clickable, tappable, tab-able, etc.
What causes this strange phenomena? How do I even diagnose when my site is W3C Compliant?
Ugh... the horror!
I really don't have code to support this, but I could paste my entire page on here. I will do that on request, or my CSS file, etc.
When using bootstrap .col-* DIVs should reside in .row DIVs and in turn .container DIVs. I can see in your html that you have 2 top level DIVs with a class of .col-*, and they have different screen sizes associated with them. Your footer DIV has a class of 'col-lg-12 footer area' which means when it gets below 991px it will stop floating, while the rest of your content floats, which is whats causing the issue.
If you change the footer class to: 'col-sm-12 footer area' - this will solve the issue.
But what you ideally need to do is remove the col-sm-12 from your footer and page-wrap altogether and replace it with 'container' so they look like: <div class="container footer area">