How to avoid a container to scroll horizontally?

How to avoid a container to scroll horizontally?

Hi there.

I am working on a project and changing some styles with media queries. And on the @media only screen and (min-width: 576px) and (max-width: 1024px) I am have some issues in which the container is scrolling horizontally! If you have any tips to help me I would appreciate.

Follow the project link:

I don’t see a horizontal scroll bar anywhere…

Plus it helps to give directions where to go if your link doesn’t land exactly on the page you’re referring to.

Yes, indeed. I don’t have a scroll bar. if you inspect on chrome and change the screen to tablets, you will see that the .container#meBaby is slighted scrolling horizontally and I don’t know how to fix it.!

This? Are you trying to prevent the white part from showing when trying to go right?

Exactly, to not move horizontally whatsoever.

It’s a browser thing.

To solve the problem you have to understand what is happening here. It’s simply the body in the background.

You can see what I mean if you change your body:

body {
   background: orange;

You can solve this a few ways., changing background of body to same as container,. or making the body position fixed, top: 0, left: 0, right: 0, bottom: 0; Though the latter approach will require some tinkering to all the children elements on page and possibly need overflow-y: scroll.

1 Like

thank you very much.