overflow-x: hidden; not working (mobile)

Asked Apr 27 '17 at 08:34

Active Apr 27 '17 at 08:42

Viewed 105 times

The overflow-x is working fine in Desktop, but when it runs in mobile and tablets, it doesn't work.

I know it's because of the images, but I want to display them that way on the mobile view, but it scroll horizontally to display the rest parts of the image.

How do I force hidden overflow-x? (didn't work either with !important) I also tried width and height of 100%!

https://jsfiddle.net/4wqx2f0k/

Please check the site on mobile: http://urbanphenomena.net.projects/urbanBeta

edited Apr 27 '17 at 08:42

Omar

32,261
9
68
109

asked Apr 27 '17 at 08:34

Abdulrahman Mushref

Set the image width to 100%. – athi Apr 27 '17 at 08:40
1

http://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers Did you see this? – Geethu Nimesh Apr 27 '17 at 08:43
Yeah, but it didn't help me @GeethuNimesh – Abdulrahman Mushref Apr 27 '17 at 08:49
maybe if you remove `width: 100%` it will work – Ani Apr 27 '17 at 08:52
Definitely a duplicate. The answer is: html, body { overflow-x:hidden; position:relative; } – Tom Walker Aug 27 '18 at 22:48

overflow-x: hidden; not working (mobile)

0 Answers0