Scroll bars in Codepen - help!

1

Hi - I was trying to sort out the responsiveness of my page, and have run into all sorts of trouble! I noticed that instead of the usual responsive nature of the page when you scale up and down I’m getting scroll bars at all viewport sizes. I’ve tried deleting every different part of the HTML and the CSS but can’t figure out how to get rid of them!

https://codepen.io/bdurrant91/pen/vYNMXVP

Many thanks,
Ben

2

Hello there,

Some things to note when using CodePen:

  1. CodePen does not expect any content outwith the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. If your project uses React, use the Babel preprocessor, and link the CDN in the appropriate :gear: section.
  5. The editors offer the ability to format and analyse your code, providing useful information about forgotten closing tags etc.

If you are still confused with how to use CodePen, please read the official documentation.

As for most web projects, many browsers automatically add their own margin/padding to elements of the page. So, I suggest you introduce this line to the top of every project’s CSS:

* {
  margin: 0;
  padding: 0;
}

Perhaps, make use of the overflow: hidden property on your root element. Then work from there.
Lastly, ensure to set the width property of all your elements, as needed.

Hope this helps

1 Like
3

Thanks for your help.

I couldn’t find the exact cause of the issue, but I’ve overcome it by starting from scratch, but this time designing for a mobile viewport and adjusting upwards rather than the other way around.

4

https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

Hopefully this helps sometime.

1 Like
5

I suppose my problem was that I wanted to find whatever was straying over the width of the page and causing the scroll bar, rather than just hiding it. Useful tip to know though - thanks!

1 Like