Unknown cause for horizontal scrolling bar

Well, I’m building my own portfolio website, but I’m still at the beginning of it, and obviously I’m not the best developer.

My problem is: let’s say we have a page, and if the page main content is smaller than the screen size, everything is fine, but if its content if bigger than the screen HEIGHT, needing the VERTICAL scrolling bar, it also triggers the HORIZONTAL scrolling bar, and I can’t find a way to fix it.

I already did edit the CSS using chrome developer tools, and if I change the width sizes of the stuffs on the page, obviously the horizontal scrolling bar disappears, but it is non-sense making those width smaller than what they are in the code (which is 100vw), because I want the website to adapt to screen size.

I’ll leave below a link to stackblitz with my code, and also the github for the project if needed.
I hope anyone could help me, and if so, please explain what did happen, not just the modifications, but the reason for the problem.

Stackblitz: https://stackblitz.com/edit/angular-ivy-mqxzvp

Github: https://github.com/joaocasarin/joaocasarin.github.io

Skills.css

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.wrapper {
  background-color: #F25A70;
  width: 100vw;
  position: relative;
  min-height: 100%;
  padding: 50px 0 100px; /* BUG PROGRESS BAR */
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Press Start 2P', cursive;
  color: white;
}

.title {
  font-size: 40px;
}

.skills-tec {
  display: flex;
  align-self: center;
  margin-top: 60px;
  font-family: 'Press Start 2P', sans-serif;
  font-size: 25px;
  color: #FFF;
}

.skills-tec .icon {
  margin-right: 25px;
  height: 90px;
}

.skills-tec .icon-rest {
  margin-right: 25px;
  height: 54px;
}

.skills-tec .skill-bar {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.progress-bar {
  box-sizing: border-box;
  background-color: #FFF;
  border: 5px solid #000;
  height: 40px;
}

.progress-bar::-webkit-progress-value {
  background: #7C5E99;
}

.progress-bar::-webkit-progress-bar {
  background-color: white;
}
<section class="wrapper">
  <h2 class="title">Skills</h2>

  <article class="skills-tec">
    <img class="icon" src="../../assets/ico_html5.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">HTML</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon" src="../../assets/ico_css3.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">CSS</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon" src="../../assets/ico_js.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">JS</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon" src="../../assets/ico_react.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">ReactJS</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon" src="../../assets/ico_nodejs.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">NodeJS</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon" src="../../assets/ico_tdd.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">TDD</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon-rest" src="../../assets/ico_restapi.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">Rest API</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon-rest" src="../../assets/ico_ux.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">UX</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>
</section>

Content bigger than screen size(height):
look at the horizontal scrolling bar and the size of content
Content smaller than screen size(height):
enter image description here

1 thought on “Unknown cause for horizontal scrolling bar”

  1. The stackblitz link has issues. It keeps crashing when I’m playing with Chrome Devtools and adjusting the widths so I can’t give a definitive example or answer. It’s also not the same content shown in this question.

    Your issue is that part of your content is wider than the view when you reduce the browser width and that extra space is rightly being adding to the horizontal scrollbar.

    When you start to scroll, notice how the header and footer remain as wide as the original view on load with white space whilst the scroll fulfills the width of your content. This is the indicator to this particulat issue.

    From what I was able to see in your stackblitz, you have added a left margin to your main content, rather than trying to center it which is creating part of the extra width you don’t want.

    In the example you gave here, again you have added right margins to your icons. Same issue I believe.

    By removing those margins you will help reduce your overall content width. I am not sure these are the only place or only issues but they are a start and will help.

    When I get these type of issues, I style everything with a border:

    * {border: 1px solid black;}

    The extra 1px everywhere will screw the total width more but you can then find the offending item and fix it alot easier as you will see which ones are creating that extra width.

    Keep the border on until you don’t get differences in your header, footer and content widths. if you still get it after this, add the border again and find the next offender. Repeat until good.

    Reply

Leave a Comment