Mobile version of website not fitting.

Topic summary

A mobile website displays horizontal scrolling issues, allowing users to scroll side-to-side instead of only vertically.

Root Cause:
Two elements are causing overflow on mobile devices:

  • Custom image carousel section
  • Review section (specifically the arrow element)

Proposed Solutions:
Multiple CSS fixes were suggested to hide horizontal overflow:

  • Add overflow-x: hidden to .custom-imagecarousel-slider and .review__section within a media query for screens under 767px width
  • Alternative approach: modify base.css or theme.css file with overflow-x: hidden !important for .review__section

Current Status:
The issue persists after initial fix attempts. The problem is now isolated to the review section’s arrow element on mobile only. The original poster is asking if there’s a way to hide this specific element on the mobile version while keeping it on desktop.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.

Hey guys,

I need help with the mobile version of our website. For some reason you can scroll right on mobile version. Is there any way of making it fit nice and snug so you just can scroll up and down without it going side to side?

Url- www.phreshcareco.com.au

Thank-you again in advanced.

1 Like

Hi @Phreshcareco ,

We’ve tested your website on real devices and didn’t encounter any issues. If you’re experiencing problems using browser tools, try refreshing the page. This should resolve the issue.

Let us know if you need further assistance!

Hi @Phreshcareco

The issue occurs due to overflow of two section elements { custom Image Carousal , Review Section }

Add this CSS it will resolve the issue

@media(max-width:767px){
    .custom-imagecarousel-slider { overflow-x: hidden; }
    .review__section { overflow-x: hidden; }
}
1 Like
  • Here is the solution for you @Phreshcareco
  • Please follow these steps:

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.review__section  {
     overflow-x: hidden !important;
}
  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

Hey mate,

It looks like its still doing it, but its only happening on the review section with the arrow.

Is there anyway of hiding this? on mobile version only.

Hey mate,

It looks like its still doing it, but its only happening on the review section with the arrow.

Is there anyway of hiding this? on mobile version only.