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;
}
Related
I am not sure what is causing this.. I have been looking at different smart phone screen sizes in chrome dev tools mobile view, and that random white space on the right side of my page is always there. I can't see any element that has margin showing, or padding on that side.
I thought maybe it was the bootstrap row class causing it, and I made sure to add the row inside of a container-fluid div as the docs say to do.
The weird thing is, when I hover over every element on inspecting, they all show this white space on the right; even if I hover over the html tag... So I'm thinking the issue is bigger than bootstrap at this point.
I have tried adding the following with no changes.:
html{
box-sizing: border-box;
overflow-x: none;
}
When I'm in the mobile dev tools looking at the screen, I can drag and move the cursor left and right and the whole screen shakes to fill that right blank spot... So it is not behaving like it is using border-box..
When actually viewing the live site on my phone, this shaking back and forth doesn't happen, but I still see a slight white vertical space on the right side behind the cursor.. Idk if I'm being too picky and this is just space for the cursor in the phone settings? Although I see the same blank spot on every phone size in google chrome dev tools mobile view.. I know I'm not crazy! Well not completely yet!
Also, not that it helps in this situation(I think), my site is built using .NET Core 6 MVC. I am using Bootstrap 5. I am ready to start removing my media-query css line by line to see what could be causing it.. Its not an obvious issue, but I notice it of course.
If anyone has any idea what it could be, please let me know where to start.
You have to take into account that an element's width is not just the width itself, but a sum of its width, padding, border, and margin, and sometimes border-box doesn't fix the problem.
If you're using animations on scroll like a slide from left to right or vice versa can also screw your pages sometimes.
Well I can't believe it but I had overflow-x: none, instead of overflow-x: hidden; I also had it on the wrong media query in my CSS.
Just glad I'm not crazy! lol
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
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! :)