Horizontal scroll - Mobile Version of my homepage

Store Design

Topic summary

A user encountered a horizontal scroll issue on the mobile version of their Shopify store, while the desktop version displayed correctly.

Solution Provided:

  • Another user suggested adding custom CSS code to the theme’s frame.scss.css file
  • The code targets specific header and search bar elements with media queries for screens under 1199px width
  • Adjustments include setting width to 100%, removing margins, and fixing positioning properties

Outcome:

  • The original poster confirmed the CSS fix successfully resolved the horizontal scrolling problem
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi I have a problem with my mobile site. on desktop it works fine but on mobile i have a horizontal scroll in all pages . I tried everything but i cant figure it out is there someone who can help ? I already tried a couple of things but they didnt Work. thanks in advance
My website : https://e018c6-82.myshopify.com/

5868676088606081501.jpg
5868676088606081501.jpg591×1023 55.7 KB

2

Hi @Martin299 ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/frame.scss.css
  2. Add code below to end of file
@media(max-width: 1199px){
    .search-bar-type-3.drawer--top .search-bar__table.search-box {
      margin: 0!important
    }
    .header-type-8 .sticky-animate:after {
      right: 0!important;
      
    }
    .header-type-8 .sticky-animate:before, .header-type-8 .sticky-animate:after {
      width: 100%!important;
    }
  }
3

Thank You so Much It works