I know other people have already asked about this before on StackOverflow, but I have been trying to fix this problem for days already with no luck. My website looks great on the computer but when I test it on mobile, a really annoying white space shows up in the right side of the display.
I tried to...
Set overflow-x: hidden on the body;
Set overflow-x: hidden on the html (it affected the scroll);
Set width: 100%, on both body and html;
I tried removing the navbar, that was apparently overflowing the body, but that didn't solve my problem.
It's like there's a "ghost" lying in that white space, because I also removed all the "padding-left" and "margin-left" from all the elements. Nothing.
Does anyone have a clue?
Here is the link: tomasperone.esy.es.
Thank you.
As a quick fix - add 'overflow: hidden' to the 'container' class.
.container, .container-fluid:overflow: hidden;
Hope this helps!
Related
I have a WordPress site with a really weird issue.
the template on touch screens has a really large vertical margin out of the viewport
this margin doesn't exist when I use responsive browser simulation unless I activate touch simulation then somehow the page grows that large margin.
I've been poking around the inspector trying to find out which element is causing this issue but with no luck!
I even used overflow-x:hidden, max-width:100% and max-width:100vw and nothing seems to work.
here's the link hopefully someone can point out what my eyes are missing
طريقة قياس (طريقة-قياس-قيمة-مسافة-الحدقة-قيمة-ipd-الع)
irrelevant note: the site is in the Arabic language
Ok this may seem a little bit missy but as a quick solution I fixed the problem by adding this code in a media query.
html {
width: 100vw !important;
overflow-x: hidden;
}
Let me know if it works bro.
BS: the elements that are out of proportion is the navbar and the scroll to top as per attached so if you want a clean fix then fix their CSS as they are the root of your problem
thanks to anyone who considers helping me.
When I am resizing my website, there is a white space that is being created.
The white space I refer to, circled in orange.2
I don't know why it happens, and when I use:
overflow: hidden; / overflow-x: hidden;
It fixes the issue.
using overflow, and it is fixed!
Can someone help me understand why using overflow: hidden fix the issue?
And also, why is this happen in the first place?
Thanks!
overflow - means that something (in this case one of your html items) is so to say bigger than its container and therefore it overflows or spills out. by making it "hidden" you hide it and therefore only the part of your item which fits to its parent container is visible
It would help if you could share some of your code that way we could build off of it and see more clearly what is happening.
That being said, the large white space is due to the image for CBS CNN being too wide as you can see in your first image. In the second image, you make overflow hidden and the CBS CNN is cut in half to fix your issue. You need to change the way you style that image for mobile view.
I'm working on a project and I'm running into a big issue. I'm using bootstrap and I need the page to be full width. I'm using container-fluid. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. There is no scroll bar but you can move it around with your finger, it only moves a little bit but it is annoying. I don't even know where to check anymore. Its a site built on the Sparkpay CMS and it uses bootstrap 3. I'm not even sure how to refer to the problem, I've been looking for solutions online but I'm not finding a lot of posts similar to my situation.
The link is:
https://store55652.mysparkpay.com/
I know I'm supposed to post code, but I really am at a loss here. I've scoured through all my CSS(there are a few files) I cant figure it out. Any help here would be greatly appreciated.
This works for me
html, body {width: auto!important; overflow-x: hidden!important}
Seems even on desktop you can scroll left/right.
The simple way to fix is add:
html {
overflow-x: hidden;
}
But actually you should fix the overflow elements. For example you set padding left/right 0 for container-fluid, then you should set margin left/right to 0 for row as well(now is -15px). Otherwise it will out of the container.
I just had the same issue and I wanna emphasize what #larrylampco said once more:
There must be some elements overlapping on your actual pagesize which extends the pagesize to where this far you are able to scroll.
For me it was a tooltip I added for desktop screens. Forgot to remove it for mobile. The tooltip wasn't visible when loading the page on mobile, but it was there. That's why the page extended.
To figure out what was causing this, I put my desktop browser in developer view, chose mobile view and selected an iPhone, then "swiped" so my content was off-center. I could then hover the inspector arrow tool over the empty-looking margin until I found the culprit.
In my case, it was an issue with the mobile menu not collapsing perfectly on narrow screens.
Keep the position of the container(e.g. div, nav, etc.) static.
I had the same problem. Changing the container position in which the problem persist solved my issue.
It's all about margin, find out which main element has margin by using chrome devtool and make it margin:0;
or try this body {
margin:0;}
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Just Copy this code in body and text. I will help you
Issue only relevant for Safari browser.
A picture is worth a thousand words, so here's a screenshot:
As seen, the problem is with a bottom border extending too far right. This seems to be an issue with the original template. Yes, I've contacted the designer, but it appears they're of little help (even after purchasing the $10 "quick help").
Interestingly, when viewing the demo with their global site navigation, as seen here the border is contained correctly, however, removing the top black navbar will produce the issue.
How can i fix this? Is there someway to implement the black navigation, but do so invisibly? Can I fix this with css? Please Advise?
In your screenshot I can see you have padding: 50px 100% on your .txtabs-content div, the 100% could be adding the unwanted padding, this should probably be padding: 50px auto.
Although, you should post some code and if possble, a JSFiddle so this can be verified as the issue.
I've currently looked at every single post I can on Stackoverflow for a solution to this issue. I cannot figure it out. The website in question is http://ourcityourstory.com/. If you scroll to the bottom you'll notice about 23px of whitespace. This—to the best of my knowledge— wasn't there previously. It appears to have just shown up. Although, I could've missed it.
Anyways, I've done everything I can concerning margins, paddings, floats, overflow: hiddens, appending my "clearfix" class to elements. etc. I cannot figure out what is. Any help would be appreciated as this is truly boggling my brain.
It's because of an iframe that is generated at the very end of the document.
That frame has no visible content (just some scripts) so you can set it's position to absolute to remove the space.
You can try making it with following CSS code:
$('iframe[class^=PIN]') { position: absolute; }