Can't figure out how to remove this hoizontal scroll bar

1

this horizontal scroll bar is appearing after vertical scroll bar appeared. I think this is happening because of the vertical scroll bar
what can i do for this?

image
image537Ă—830 28.3 KB

codpen link: https://codepen.io/tharindu0nilanga/pen/XWxRbBb

see what happen when viewport width is less than 760px. also reduce the viewport height if vertical scroll bar is not appearing

2

Hi, and welcome.
that’s the infamous 100 viewport width overflow, remove it from the body, problem solved!

Using 100vw is tricky, here is a nice article about the topic.

1 Like
3

Hey @tharindu0nilanga. Welcome to the forum.

body {
    overflow-x: hidden;
 }

By using this you can remove the horizontal scroll bar.

Hope this helps :sparkles:

4

that works!.. thank you very much :ok_hand:

5

Overflow-x hidden helps, you should still remove 100vw.

You don’t need it and just overflow hidden might clip parts of the content for some users, especially full screen images.

Try it in the Code pen: add overflow-x hidden, then remove 100vw and see how the content is shifting.

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.