Mobile width affected from scroll to top widget

Ask the Community General Questions
1

  • Issue description: Hi there, my mobile interface is being impacted and now have to scroll across since the scroll to top widget has been added. This looks really poor. I’ve found similar threads, that have been given code to add, and have tried this, and it has not solved the issue. I really need my website to look and perfrom to a high standard and this is letting me down. Please can this be rectified in any way? I originally chose a lovely widget length ways on the right side of the page, but this wasn’t visible. so have adapted…but no luck

  • Link to the page with the widget in question: https://www.holisticserenity.co.uk/

2 Likes
3

Hi there and welcome to the Community, @Nicole_Shields :waving_hand:

I’ve checked your website and the Back to Top widget seems to be working fine on my end. Could you please share a video screencast of the issue you’re experiencing? I’ll be happy to look into this :slightly_smiling_face:

1 Like
4

Hi Max, thank you so much for such a prompt reply. I may not have explained it so well but hopefully this shows the issue a little. Happy to do a better recording if needed. This issue was very prominent on my homepage, and so when I click on the hamburger menu, half the wording of the menu options are off-screen. Any help is gratefully appreciated.

2 Likes
5

Thank you so much!

I’ve just double-checked your website and this horizontal scroll bar at the bottom doesn’t show up on my end. Could you please specify the exact model of your device?

1 Like
6

Thank you. I have a samsung s22 ultra. It definately wasn’t there before I added the widget.

2 Likes
7

Thank you!

Our devs also checked your website on different devices (including samsung s22 ultra) and couldn’t replicate the issue.

However, we’ve added this code to the Custom CSS field on the Settings tab of your widget’s settings, which should fix the issue:

@media screen and (max-width: 640px) {
 .global-styles,
 body {
  overflow-x: hidden !important;
 }
}

Please check it out and let me know if it helped :slightly_smiling_face:

1 Like
8

Thank you so much Max. It’s not made any difference my end. I’m so baffled by this. Is there anything else I can do?

2 Likes
9

Got it, thanks!

I’ve forwarded this issue to the devs for further investigation. I’ll report back as soon as I have more news :slightly_smiling_face:

1 Like
10

Hi there, @Nicole_Shields :waving_hand:

We’ve adjusted the CSS code:

@media screen and (max-width: 700px) {
  .global-styles,
  html, body {
    overflow-x: hidden !important;
    max-width: 100%;
  }
}

Please check your website and let me know if it helped :slightly_smiling_face:

If the issue still persists, please specify the OS version of your device and let me know if this issue occurs in another browsers/incognito mode from the same device :folded_hands:

1 Like