I have checked everything on my page and cannot figure out what is giving my website a large right-margin in iOS. It's driving me crazy. I've tried setting overflow: hidden; on the body to no avail. There is nothing that is wider than 960px. This is a very responsive design and all is working well except this one infuriating thing. Here is the URL to the dev site: http://ourcityourstory.com/dev/
Please see attached screenshot:
Any help would be appreciated.
Update: I've tried fooling with the viewport. See this Stackoverflow post. But to no avail. I built the entire site off of the HTML 5 Boilerplate
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
Add this to your CSS. then it should be working fine
The culprit was the Facebook share button. Instead of behaving like Twitter or Pinterest it iframes in and sets a width on the body of 500px!
A simple overflow: hidden; on my .social class fixed this.
Related
I'm creating a website at the moment for quite a long time now. The last thing I did with it was to make it responsive on my second smaller laptop with media queries. However, I'm noting that another scrollbar appeared when I opened the site on my main computer. The 2 right side scrollbars aren't dependent.
The whole website is in a folder, so I can't really share HTML/CSS codes. Firstly I wanted to know if someone already faced this kind of problem and could advise me from where to start to solve it. I guess it's in the CSS where I possibly created many body/html rules ?
Thank you !
So basically you were having overflow enabled on your div and the default is of body.
therefore you saw 2 scrollbars. One of div and one of body.
That's great if you've solved it by disabling the default body scrollbar and keeping the div overflowable in the y-axis.
I have faced a similar problem a while ago.
For a better answer i should read the code but i can tell you where you should start to look for the problem.
This is probably happening because of a div in your page that has a rule such as "overflow-y: auto" and it's parent is itself bigger than the current page heigth.
.container1 {
background-color: red;
height: 10000px;
width: 100%;
}
.container2 {
background-color: blue;
height: 100vh;
width: 100%;
overflow-y: auto;
}
.container3 {
background-color: green;
height: 10000px;
width: 50px;
}
<div class="container1">
<div class="container2">
<div class="container3">
</div>
</div>
</div>
I made a quick snippet you can execute to see better what is happening.
I hope this helps you to find the problem.
Finally solved it. I had to put manually a <style : "overflow-y:hidden;"> to my body on my html page, even if I tried to solve it with CSS. Now everything's working well !
I'm working on a website, http://strange.business which is designed to load 5 random stories in 5 scrollable viewing divs. Note: There are only 2 stories right now.
There didn't appear to be any problem with that aspect of the page design, the divs would scroll without issue in Chrome, IE, Edge, etc. But I tried it on my gf's iPad Mini yesterday and the divs are locked for some reason. The stories do load, but they won't scroll.
The basic setup for those divs is thus:
#display1 {
background-color: white;
height: 350px;
overflow: auto;
}
#display1Inner {
width: 100%;
height: 100%;
overflow: visible;
}
<div name="display1" id="display1" title="Display1">
<span id="display1JavaWarning">You may need to enable
Javascript</span>
<object type="text/html" id="display1Inner"></object>
</div>
When the page loads, it executes a javascript function that picks a random preview htm file, and then populates the display1Inner object with that data. I'm aware that my coding could often be tighter, but it does generally work. Except on mobile Safari apparently.
I've tried a bunch of CSS variations after researching similar problems, but nothing seems to do the trick. That "overflow: visible;" bit was one of my latest attempts, but it wasn't present when I first noticed the problem. I don't know anybody with an iPhone (oddly enough) so I'm not sure if later versions of Safari still bug out on this, but the iPad I tested this on isn't that old. I should be able to make this work. Any thoughts?
PS. The page is still is a work in progress, sorry if you have a hard time navigating it.
ETA: Alright so I converted the page to use iframes inside nested divs, and now it works across platforms. So that much is solved. Yay!
Now though, I'm fiddling around trying to get rid of the double-scrollbars that appear when the page is viewed in desktop browsers. As I understand this workaround, IOS Safari totally disregards iframe height settings and displays them at full length. Hence the need for the iframe-wrapper div to keep that in check. And hence the extra scrollbar when I look at it in a "normal" browser window. If I disable scrolling on the iframe-wrapper div then it eliminates the double scrollbar, but also breaks scrolling in Safari.
You can view the most current incarnation at http://strange.business/test.htm. I'm open to suggestions.
ETA: Success! After setting the iframe heights to 99% and taking out the borders, they look just about like they did before, with no extra scrollbars. And scrolling works across platorms now. One less problem in the my life. Thanks for the help!
Have you tried the following CSS for your div:
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
I came across that solution in this codepen:
https://codepen.io/kristiegiles/pen/WveNaX?editors=110
It is set up to scroll an iframe, but I tried it with some plain html in place of the iframe and it worked on my iPhone.
The html is basically a div wrapped around your content:
<h1>scrolling on iOS</h1>
<div class="content">
<div class="iframe-wrapper">
// Your content here
</div>
</div>
With -webkit-overflow-scrolling: touch; and overflow-y: scroll; added to the class applied to the div:
html,body{
height:100%;
}
.content{
width:100%;
height:100%;
overflow:hidden;
position:relative;
}
.iframe-wrapper{
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
Hope that helps.
My website has blank space to the right of it almost as if a margin was added to the site. The site content stretches 100% across the site and looks good, but if you scroll to the right you will see the space whether you are on a desktop or mobile.
This is such an age old question which I have also encountered in the past, but in this specific scenario, I can not seem to figure out what is causing the extra space and or why it behaves the way it does.
Thanks for any suggestions!
This block of code is causing the issue:
.hentry:after {
background: rgba(0,0,0,0);
display: block;
position: relative;
left: -5.1%;
width: 110.2%;
height: 1px;
}
Set the width to 100% or less. Good luck!
Just simple add this in css file.
body { overflow-x: hidden; }
I've been tearing my hair out for a while now trying to figure out why I can't click the links in my footer. I know my css is a bit sloppy, but it gets the job done. There's probably a lot more efficient way to get the effect of a footer that sticks to the bottom of the page that appears behind all the rest of my content, but this is what I have so far:
here's my jsfiddle of my issue
it looks a bit messed up in the jsfiddle, but the idea is thereI have a pointer-event:none here:
.bottomdivtransparent {
pointer-events: none;
width: 100%;
top: 0px;
height: 300px;
left: 0;
overflow: hidden;
opacity: 0;
}
Which should make it so I can click the links, but they remain unclickable! I'm sure the error is something really simple and staring me right in the face..
Any suggestions? Or any easier way to get the footer to appear behind all of my content but still extend about ~300px below everything?
Thank you!
edit: Thanks to Kasyx and Andrea Ligios for the help -- they have determined that it works fine in Firefox but not in Google Chrome for some reason. The margin-bottom property is messing up on .bottomdiv..
As i noticed in comment pointer-events will not work in this case. But instead of it ill suggesting you to add margin-bottom to your div like in fiddle: http://jsfiddle.net/auFeV/6/
.bottomdiv {
//(...)
margin-bottom: 310px;
//(...)
}
(Thank you #Andrea Ligios for improving this answer)
I've been using a twitter bootstrap based template.
For the images at the bottom of the landing page, for some reason there is an extra scrollbar that appears which then causes the images in the portfolio at the bottom to appear cropped, or partially loaded.
Not sure which bit of html or css is causing this, as the problem doesnt seem to occur in the original template. I've checked and compared my code to the original but cant figure out what's causing it.
I have removed alot of the code from the original as i dont need much of it. I just wanted a simple homepage, but cant figure what's causing the additional scrollbar or overflow effect.
Here is the page link if anyone has any ideas: http://krmmalik.com/photography/
The reference to the Ascensor.js is what's breaking the site and adding all that ugly inline CSS to the body. I have no idea what it's supposed to be doing honestly but it's breaking things at the moment. I disabled js on your site and reloaded it and everything works fine.
That layout isn't responsive as much as it is just a fluid layout. It doesn't resize well honestly. I hope it wasn't terribly expensive. Either that or something you changed broke how it is supposed to resize.
I'd try and find out what that script is supposed to be doing, but in the meantime just remove the reference and your site seems to load correctly.
I'm seeing this in Chrome dev tools:
<div class="house" id="house0" style="height: 268px; width: 1726px; overflow-y: scroll; overflow-x: hidden; margin-top: 0px; margin-left: 0px; position: absolute; ">
which sets a fix height, and then causes the second scroll bar when items drop below that height with the overflow-y:scroll; property.
However, this isn't in the View Source of your document! Getting rid of that is the key to fixing the problem, if you happen to know where it's coming from.
If you have control over it, maybe try changing it to:
<div class="house" id="house0" style="min-height: 268px; width: 1726px; overflow-x: hidden; margin-top: 0px; margin-left: 0px; position: absolute; ">
What this (should) do is make it never be shorter than 268px while allowing it expand to a new height, if it needs to. I say should because I didn't test it!
here is you made silly mistake. just remove overflow-x: hidden;
and overflow-y: scroll; and your code something like this.
<div id="house0" class="house" style="width: 1263px; margin-top: 0px;
margin-left: 0px; position: absolute;">
Hope it will helps you, Cheers. !!
Mark it as answer if it will helps so that other can fix their same problems. Thanks.