I'm experiencing a problem with mobile devices I have a white area in the right of my website and a scroll bar also. So far that I have read this issue is creating cause of an element, but I can't find the solution on it. I have checked my CSS rules and my width is all good in every part. Can anyone suggest me anything else so I can fix that issue?I used the developer options and I was deleting elements to see what element is causing the problem but I didn't find something. My repo is : https://lazospap.github.io/LazPap/ . EDITED : https://github.com/LazosPap/LazPap here are the files
Please put this code in your style
html,body{overflow-x: hidden;}
Related
i really hope someone can help me, since this Issue gives me headache already.
I got this Site www.Skilldate.de http://www.Skilldate.de an on the “Landing Page” if you decrease the Size of the Window (or directly open the Page via Mobile) you should already see the Problem :
There is always some unused Space on the right Side which makes the browser scroll on the width and i just dont know how to get rid of it, since it destroys the responsive feel
Iam grateful for every Inspiration
Cheers and regards
Thomas
You should have overflow-x hidden.
add in your css
#form1 {
overflow-x: hidden;
}
Got a strange layout problem on my website. This only occurred in responsive and only on an article page. On the start page everything is fine, but when i open an article and watch it on my phone or the responsive-emulator from chrome developer-tools, i can scroll to right.
I tryed to debug this, watch the dom-highlighter from the dev-tools but i cant find a reason why there its possible to scroll to right. The insepector shows me no margin or padding.
Startpage: https://pokefans.online
Article-Page: https://pokefans.online/artikel/kyogre-leichter-zu-fangen-mit-neustem-update/434/
Really appreciate for your help.
The one causing the issue is the .article_trainer_row, particularly the .article_traier_text as it has a fixed width of 335px.
Using width:100% should fix it. (maybe with a max-width so it doesn't go bananas on higher resolution)
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
I need some help finding what exactly is causing the white space on the right in mobile view of my site.
http://shahil229-001-site1.smarterasp.net/
I've tried using overflow-x : hidden in the css but it stops the top navbar animations from working in the normal desktop view so thats out of the question.
Any help would be appreciated. Thanks
I found the issue! In the box where it says "SYSPRO" your link seems to be overflowing. Therefore causing it to make the page wider then it should be, and you can't see it because the link is white.
EDIT
Specifically the link http://www.syspro.com/product/what-is-erp.
EDIT 2
As Jesse Dockett said, also add width: 100% to your code. Thank You Jesse! :)
The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
I've already modified the overflow: hidden, to be set to overflow: auto, and this works quite well in the .header-container, although it seems that although this fixes the problem, there is still the issue when this is set that the images (such as the iPad at the top of the page, then overlaps the next section below it).
Thoughts on how to make sure either the image extends the container so it doesn't run into the next one, or how to fix this once and for all?
Just a thought, could this possibly be the Javascript, as I noticed that the menu bar when scrolled down doesn't dissapear until hovering over an active/Javascript link in the nav bar.
Your support is greatly appreciated :)
If you put a console.log in your call:
if ($(window).scrollTop() > 500 && getScreenWidth > 767) console.log("true")
else console.log("false")
Do you see in your console log the value changing when you scroll down at your homepage? And is this the same output as on your bookkeeping-plans page?
and does it also appear if you remove the slideup and slidetoggle functions?
$(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').slideToggle(250);
This is what I can think of that is conflicting your code based on what I see on your website