-2

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>
AnarhchistPotato
  • 11
  • 2
  • Hi AnarchistPotato, there's not enough detail in you question to allow anyone to answer it. See [how to ask](https://stackoverflow.com/help/how-to-ask). You really need to add your code as [a minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) for anyone to help you in any meaningful way. – Adam Apr 24 '23 at 16:54

2 Answers2

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

Uncle Iroh
  • 137
  • 1
  • 12
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.

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thanks for the answer i will try to find the code and add the width code to my css i will tell if everything works out fine – AnarhchistPotato Apr 25 '23 at 19:36
  • like i checked it all i couldnt find a specific overflow and i didnt even see any overflow on the site its just there i tried using width:100%; and overflow:hidden; but it didn’t change anything on the cellphone’s its still the same some of the phones doesnt have an overflow some does and there is even an A51 two of them actually one of them has an overflow the other doesnt – AnarhchistPotato Apr 26 '23 at 13:31