0

So I've been recently working on a website and have been experiencing small bugs. One of which has really been an issue in fixing, the other I will discuss on another forum.

The x-axis is not hiding, even after hiding in CSS, this is a real issue. It works on laptops, just not in the mobile view. 

body {
    overflow-x: hidden;
     overflow-y: auto;
     max-width: 100%;
}

My website address for this issue is:

http://www.theeventlister.com/landingpage/events/uk/boardmasters.html

Alex Riabov
  • 8,655
  • 5
  • 47
  • 48
Event Lister
  • 3
  • 3
  • Did you try with `html,body { overflow-x:hidden} ` . So also the `html` ? – Mihai T Jul 16 '18 at 11:24
  • Hi thanks for the reply, yes tried with that also, still not working, unfortunately, will keep working to see how this can be fixed. – Event Lister Jul 16 '18 at 11:29
  • Possible duplicate of [Overflow-x:hidden; on mobile device not working](https://stackoverflow.com/questions/24193272/overflow-xhidden-on-mobile-device-not-working) – Ioana B Jul 16 '18 at 12:08
  • Hi, thank you, no duplicates, ill make sure to double check across. – Event Lister Jul 16 '18 at 13:01

1 Answers1

0

the problem is that the following code:

     body, html {
     height: 100%;
     }

Overrides this code :

    body {
     font-family: 'Roboto', sans-serif;
     position: fixed;
     font-weight: 400;
     font-size: 1.125rem;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
     overflow-y: auto;
    }

Simply add overflow-x: hidden; to the first code and it will work :

body, html {
height: 100%;
overflow-x: hidden;
}
Shathiso Ntibi
  • 61
  • 4