CSS, HTML – scroll bar problem on smartphone - html

I have a problem with my site, particularly when I open it from my smartphone.
The problem is that the scroll bar does not make me go up and cuts a part of my container, as you can see, the word REGISTER is very attached to the browser bar. Here's the picture: screen
On the computer this problem is not there, as you can see, there is a padding between the title and the container: screen
Please help me if anyone has the idea of ​​how to fix it.


add this in your template style or after your style
<style>
*{
overflow-y :scroll;
}
</style>
i hope it was useful

Related

How To Fix The Horizontal Scroll Bar At Mobile

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;}

Page moving left and right while in mobile browser

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

White Space on the right in mobile view

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! :)

Webpage that does not scroll left or right

The following webpage does not allow the user to scroll left or right. This is an issue when the viewport is smaller than 960px as the site is not responsive.
The site doesn't scroll when javascript is disabled which leads me to believe that this is being achieved by HTML or CSS
What code is achieving this and how do I remove it?
Site: http://oddschanger.com

there's a lovely
overflow-x: hidden
in main.css line 166
hope this help

No Horizontal scrolling on website

I'm trying to position an image on my website that is wider than the resolution, which creates a horizontal scroll bar every time. I know someone who has a site with an image wider than the screen but his site doesn't cause you to scroll.
Does anyone know a code or a fix to the code that I can add to make the page unscrollable horizontally?
Thanks!

Add overflow-x: hidden to your <html> tag, or set the image as background-image instead, if the image is for design purpose and no content.

body {
overflow-x:hidden;
}