How can I hide an element off the edge of the screen?

Question

I\'ve got a div that I want to position partially off-screen like so:

div{
    position: absolute;
    height: 100px;
    width: 100px;
    right: -50px;
            


        

Answer 1

You could add a media query to avoid scrolling at a certain point. So basically take the width of your main container and create a min-width media-query using that.

@media (min-width: 960px) {
    body {
       overflow-x: hidden;
    }
}

Should work for modern browsers.