1

This question is dealing with the same issue as found here

The problem is that I can't get the overflow-x: hidden; to work. I tried putting it in the html and body first (broke on mobile, which is why I found this question) and then the main solution - putting it in a wrapper. I probably missed something simple so go easy on me please :)

Website in question here

Current wrapper div (css):

wrap {
    overflow-x: hidden;
    position: fixed;
}
jured100
  • 15
  • 1
  • 6
  • Tested on Google Chrome on Xiaomi Redmi Note 8 Pro and worked fine, no broken responsive. Which device are you using? –  Jul 07 '20 at 09:18
  • Well, while coding I was using brave browser to test it. After that comment I reopened this in google chrome and it worked fine... I have no idea why this is. I also opened it on my phone and it works, but I imagined that if it doesn't work on pc it couldn't possibly work on phone so I didn't even check that one... I am confused. – jured100 Jul 07 '20 at 09:27
  • Provide a 'height: 100%' for your wrap class. – Sterex Jul 07 '20 at 09:45
  • @Sterex This fixes everything once I remove "position: fixed;" thank you very much! I want to tag your answer as correct so please submit a response (you get points or something, idk) – jured100 Jul 07 '20 at 09:50
  • Added as answer. – Sterex Jul 08 '20 at 10:25

3 Answers3

1

Most likely you forgot to indicate the "class" of the element "wrap" in HTML and classify this element in the CSS.

PURPUSHECHKA
  • 11
  • 3
  • Your answer is similar to the one up above. I had forgotten that true, but this breaks the website in other ways. Feel free to check. – jured100 Jul 07 '20 at 09:41
1

Put a .(dot) before wrap for class or # for id. Check

<!DOCTYPE html>
    <html>
        <head>    
            <style>
                .wrap {
                    overflow-x: hidden;
                    position: fixed;
                    border: 1px solid red;
                    width: 100px;
                    height:100px;
                }
            </style>
            <meta name='viewport' content='width=device-width, initial-scale=1'>
        </head>
        <body>
            <div class="wrap">
        
                <img src="https://picsum.photos/200/300">
        
            </div>
        </body>
    </html>
Shubham Gupta
  • 1,123
  • 11
  • 16
  • Putting a dot in front of wrap breaks the website not allowing anyone to scroll on browser or on mobile and screws the resolution (elements that should be centered to the right side of the webpage take the centre of it). Good idea though! Hadn't thought of that one. (EDIT: Feel free to check for yourself) (EDIT 2: I would also like to add that without the dot the website works fine on most browser with the exception of Brave) – jured100 Jul 07 '20 at 09:38
  • Can you provide the code of your site? This helps me to better understanding your problem. – Shubham Gupta Jul 07 '20 at 10:03
  • Someone else found the fix. Thanks anyway :) – jured100 Jul 07 '20 at 13:51
1

Fixed elements do not have an inherent height.

So, either provide a height: 100% or remove position: fixed.

Sterex
  • 1,026
  • 1
  • 13
  • 29