Search code examples
htmlcssmedia-querieshorizontal-scrolling

Avoiding horizontal scroll in desktop view in html/css

I am working website in which I do wan't any horizontal scroll in the desktop view whereas the mobile view looks perfect (it should be scrolling).

I have created the fiddle for it so that its easy to make changes.

The desktop view which I want in the fiddle is:

enter image description here

The CSS codes which I have used in the fiddle in order to get the horizontal scroll is:

.squares {
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding: 1rem;
    position: relative;
    width: 70%;
    max-width: 1080px;
    overflow-x:auto;
    margin: auto;
}

Problem Statement:

I am wondering what changes I should make in the fiddle above so that in the desktop view there is no horizontal scroll. The mobile view looks perfect in the fiddle.

Solution

  • Use media queries to change your CSS to include overflow-x:hidden, instead of overflow-x:auto

    EDIT:

    You want this...

    @media screen and(min-width:769px) {
    .squares {
        overflow-x:hidden;
    }
 }

    That targets anything over tablet size (but not a portrait ipad), hope this helps.