Overflow-x for Mobile not working

  • Hello everyone, thank you for reading.

    I have tried to look for a perfect solution to the problem of hiding overflow-x: on mobile but nothing seems to be working.

    At the moment I’m using:

    body {
  overflow-x: hidden;
}

    The problem is that on mobile it just doesn’t work.

    If I use:

    html, body {
  overflow-x: hidden;
}

    My website just blocks the sticky navigation bar. And also makes the check out page full of bugs for some reason, especially when putting the address.

    I’ve tried also to update the information on the meta
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >

    I’m using Google Chrome on Desktop and Mobile (iPhone 12)

    Thank you so much for your help!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter samucarvajal

    (@samucarvajal)

    Also found a code that solves the issue:

    html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  width: 100vw; 
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

    BUT, it just blocks the sticky navigation on desktop, creates problems on the checkout cart, and in the input for addresses.

    Thread Starter samucarvajal

    (@samucarvajal)

    So, I worked out a solution! (pretty fast)

    Instead of trying to find a code to prevent it, I started to look for the cause.

    And the cause was a search widget.. so I deleted it. And now it works fine.

    Still not optimal on Safari, but, anyways.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Overflow-x for Mobile not working’ is closed to new replies.