Screen jumping / scrolling problem

Tagged: responsive, scrolling

This topic contains 7 replies, has 2 voices, and was last updated by Elizabeth 6 months, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
February 5, 2019 at 6:33 pm #62510

Elizabeth
Participant

Hi,

I’m having an issue with the page jumping when I try scroll to the bottom. The footer is not showing up, I cannot scroll below the very last line of body text. The problem resolves only when I resize my browser window to be extremely narrow. I am using Firefox 64.0.2, however my client is having the same issue using a different browser. Here is a screen capture of the problem: https://we.tl/t-uGAc8orar7

The website is http://the-first-thing.build-miner.media.

Thanks again!

February 5, 2019 at 8:04 pm #62512
Elizabeth
Participant
update – resizing the browser window sometimes resolves the issue temporarily, but it does not seem to be consistent in terms of happening only at certain widths.

Here’s another video from my client, using Chrome. https://we.tl/t-mtTtZOOkfW
- This reply was modified 6 months, 3 weeks ago by Elizabeth.
- This reply was modified 6 months, 3 weeks ago by Elizabeth.
February 6, 2019 at 8:32 am #62529
Bidur
Moderator
Hello Elizabeth,

If you add the content it’ll automatically adjust the height of the content wrapper.
Here is a quick fix. Please add the following css inside the additional css section of your customizer;
```
#cir-content-wrapper {
    min-height: 465px;
}
```
Let us know.
Thanks!
February 12, 2019 at 6:02 pm #62694

Elizabeth
Participant

Hi, I added this and it works on my desktop screen, but it did not resolve the issue on mobile devices. When I resize my browser window to approximate the dimensions of a phone or tablet, I also still see the jump.

February 12, 2019 at 7:07 pm #62695

Elizabeth
Participant

Revised – the problem is still happening intermittently at all screen widths.

February 13, 2019 at 7:37 am #62699
Bidur
Moderator
Hello Elizabeth,

Some custom code is creating the conflict inside header you can notice.
Just increase the min-height for quick fix.
You may add this css;
```
#cir-content-wrapper {
    min-height: 850px;
}
```
Thanks!
February 13, 2019 at 7:46 am #62700

Bidur
Moderator

Done! Now it’s working fine.

February 19, 2019 at 4:36 pm #62836

Elizabeth
Participant

Thanks, it does appear to be working now on my desktop and phone. Just FYI, I had not added any other custom code or plugins when I first noticed the issue, it was happening right out of the box with WordPress 5.0.3. Just thought you should know. Thanks again for your help!
Author

Posts