3

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.

Ignacio Ara
  • 2,476
  • 2
  • 26
  • 37
flash
  • 1,455
  • 11
  • 61
  • 132

1 Answers1

1

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.

snack_overflow
  • 536
  • 2
  • 9
  • 27
  • I am pretty sure the CSS codes will go inside it `@media only screen and (max-width: 767px) { . }` but I am not sure what exact code will go here. Sorry, I am not good with media queries. – flash May 24 '18 at 14:26
  • I have a similar [question](https://stackoverflow.com/questions/50661303/how-to-horizontally-scroll-the-contents-in-mobile-tablet-view-in-html-css/50661405?noredirect=1#comment88333103_50661405). I am wondering if you can help me out. – flash Jun 03 '18 at 05:49