Website is elongated on mobile

Website works perfectly on desktop however on mobile devices, I can scroll and zoom out from the websites content. This problem exists on all pages of my website.

Attached image shows what I mean.

Hey @Bawsaq,

Thanks for writing in. The issue is weird. When I first loaded your site, I saw the issue. But when I disabled what looks like a custom CSS in dev tools, the issue was gone.

Do you have custom CSS? Please temporarily remove them then check if the issue persists. If it does, please give us WP Admin access in a Secure Note.

Thanks.

Yea I was using custom CSS, and removing this did fix the issue. However, the reason I had this custom CSS was to fix an issue I had with having 2 scroll bars. I was previously instructed to use the code in this support topic: https://theme.co/apex/forum/t/2-scrolling-bars/18889

So by removing this custom CSS, I have the issue of 2 scroll bars again. Is there a way to fix the issue of having 2 scroll bars without causing the mobile view issue?

Hey @Bawsaq,

I understand you were given a code to solve the issue but that caused conflict also. There could be a deeper cause why you have double scrollbars. That neither happens in my test site and in our demo so the cause might be something. With that said, please give us WP admin access in Secure Note. And, also note that I might disable third party plugins.

Thanks.

I’ve provided my WP admin access in a secure note. Hope you are able to figure out the problem. Thanks.

I found that this is a bug in Ethos if you disable the Footer.

I’ve added this Global CSS.

body {
    overflow-y: hidden;
}

I’ll report this bug.

Thanks.

Perfect, thank you for your help!

You’re welcome. :slight_smile:

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

Hey @Bawsaq,

I got feedback from @kory, our lead developer.

The cause of this was rooted in the fact that .x-container.main for Ethos only has a :before pseudo-element that is used to create the white box that goes off to the left of the screen “infinitely.” This is an absolutely positioned element, which has a negative offset on top (e.g. top: -35px;) to ensure proper visual placement. The same negative offset was used on the bottom, but when no footer is present, this -35px offset on the bottom is what was creating the double scrollbar issue.

Please replace the code I’ve given with this

.x-container.main:before {
  bottom: 0 !important;
}

An official fix might be added in the next release so by that time, if you see it fixed in our changelog, you can remove the temporary fix.

Thanks.