Mobile horizontal scrolling?

[kstidham]

Why is my site scrolling horizontally when it goes to mobile view? I have not done anything different then the other 70+ sites I have developed with the x theme. Please view and advise. - https://locationone.sdiweb.dev/

I tried using this css:

@media (max-width: 480px) {
html {
overflow-x: hidden;}}

@media (max-width: 320px) {
html {
overflow-x: hidden;}}

Thank you.

[ruenel]

Hello @kstidham,

Thanks for writing in! The issue is coming from your custom header. Please be advised that there isn’t enough space to display the items in your header. You may need to redesign it by adding a content dropdown or use other navigation elements. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[ruenel]

Hey @kstidham,

Could you please update to the latest versions first?
Our latest versions are:

• Pro theme 4.2.3
• WordPress 5.7
• PHP 7.4

Make sure all the plugins are up to date too! Most of the time, the outdated plugin may create conflict and incompatibility with the theme or site.

This latest release contains fixes for several issues so be sure to check out the changelog:

• https://theme.co/docs/changelog/pro-4

After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

[kstidham]

The updates did not fix anything. For whatever reason this site again required some css I have never had to use before to eliminate the issue.

[ruenel]

Hello @kstidham,

The issue could be caused by your custom CSS:

body {
   overflow-x: hidden;
}
body {
   overflow-y: hidden;
}

We highly recommend that you temporarily remove all your custom CSS and test your site again. Please also make sure that your custom CSS is valid and correct. You can use this site to verify: https://www.cleancss.com/css-beautify/

Kindly let us know how it goes.

[kstidham]

This is what fixed the issue. Thanks.

[marc_a]

Hi @kstidham,

You’re welcome and it’s our pleasure to help you. If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.