Parts of website won't scroll on cellphone browser

HTML & CSS
1

Hello all,

I am a HTML CSS noob. I have recently created a new website using a free theme. www.worksitevr.com

The site works fine on desktop, but on a cellphone browser some parts of the browser won’t scroll. You have to press the yellow mail button on the sticky navigation to autoscroll down and then scroll back up to see the website content. That’s when you realize some parts of the content won’t scroll, some are parts of images, some text. I can’t put my finger on it. I’ve gone through loads of code and my brains turned mush.

Thanks for reading. Cheers

2

I’m unable to recreate your problem - Looking at it in a mobile browser it seems to scroll fine.

3

Yes, it seems to have been fixed since when I checked just before going to bed last night.

hmotiwala, problem solved?

4

Thanks all!

I found a dirty piece of code which was holding the page up, after I removed it the site started working perfectly. I noticed the webpage wobbles scrolling sideways on a mobile browser, is this because I am using pixel / points as units? Should I convert them all to percentages and em’s to resolve the issue?

5

Points are print units of measure and should not be used.

The other units of measure are satisfactory when used appropriately.

I don’t know what “wobbles” means.

6

Right,

It moves side to side when scrolling up and down. I imagine it’s because some elements leak off the width of the page At least on a lower resolution phone. Cheers

7

Does the page that you are describing use a separate stylesheet for mobile devices only?

Can you post a link to that site?

I do not have a small rez smartphone so someone else may have to help you.

8

No mate, It’s the same stylesheet… I am using an iphone 5s, I’ll do some further testing on more devices soon.

9

Link to site/page in the meanwhile?

10

www.worksitevr.com/css/style.css

11

general.css (line 11)

body, html {
    height: 100%;
    overflow-x: hidden;  /* poor idea.  disables horizontal scrollbar and clues to overflowing content. */
    width: 100%;
}
12

I removed the overflow-x piece of code, it restricts lateral movement, but after you scroll to the bottom of the page it goes off again. Weird!

13

At this stage of the game, simply removing that line will not likely help. You now have to find the problem. You should not need to hide overflow on the body element if the page is coded correctly.

Why don’t you try making the Immersive Technologies logo adapt to the narrowest width instead of overflowing the page and see if that helps? If you don’t know how to do that, just ask.

14

Thanks Ronpat, You’ve been great help. I’ll be rejigging the code in the next few days and hope to find a resolution to the issue at hand. Thanks

15

Hi,

The issue with the horizontal scroll (even on desktops) is because you have not followed the first bootstrap rule about using .container (or .container-fluid) for your page. This means that the negative left and right margins on .row will drag your page outside the viewport and not into the padding that is added to the container specifically for this purpose :slight_smile:

It is this negative margin that causes the wobble on mobile because it allows the page to scroll to see the errand content. Add a container in the right place and the issue will go away until about 460px when the design will need a little more attention if you want it to go smaller than that.

1 Like
16

Excellent spot there PaulOB! I am going ahead and converting rows to container-fluid. I usually use the container to center content, but as you can see on the website, I wanted to use all the real estate available on the screen. Container-fluid changes things now, Thanks a bunch, cheers

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.