Question 55636 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress CSS overflow (cellphone)

So i got an issue about my wordpress site i got a little overflow on my index site so i tried to get rid of it by using

**overflow-x:hidden;**

and

**overflow-x:clip;**

it worked on my computer and my (iphone 12 mini) but when i checked it on my friends phone the overflow was still there i thought it was about the cache but it wasnt about that i even used the overflow codes with @media (max-width:992px) and so on but it was just not working for some phone’s so i used a lower px on my next attempt but it didnt work again i was wondering whats the problem i got.

so i tried

**overflow-x:hidden;**
and
**overflow-x:clip;**

And i tried different width sizes but it was just not working for some phones

can someone help?

@media (max-width: 767px)
html {
    overflow-x: clip !important;
}

//Two different codes that i have tried 

@media (max-width: 767px)
html{
    overflow-x:hidden !important;
}
<html>
<head>
<title>test</title>
</head>

<body>
<!-- i cant share my html info -->
</body>

</html>
Tags:

2

Answers


  1. 0

    It’s possible that the overflow is still present on certain devices because the element is wider than the screen. In this case, reducing the width of the element or adjusting its position on the page may help to resolve the issue.

    Use responsive design techniques, such as media queries, to adjust the styles of the element based on the screen size. Check out this post for some common breakpoints — https://stackoverflow.com/a/7354648/7411567

    Login or Signup to reply.
  2. 0

    Most likely some other element is wider than the screen, and this element forces all parent/ancestor elements that don’t have a defined width to get wider (including html).

    The best would be to find the responsible element and avoid the problem there, but you can also try to add width: 100% to your css rule for html. In this case the width is defined, and overflow: hidden will prevent any display outside it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search