Bollate

HTML

[ANSWERED] css – How to remove side-scrollbar in HTML

By

Nov 18, 2022 ,

Solution 1 :

Add overflow-x:hidden; to your html class, your code should look like below

html {
  scroll-behavior: smooth;
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
}

Solution 2 : 

    <!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

html {
  scroll-behavior: smooth;
  position: relative;
  min-height: 100%;
}

body {
  background-color: #ececec;
  font-family: Lato;
  margin: 0 0 100px;
  padding: 25px;
   overflow-x: hidden; /* Hide horizontal scrollbar */
}

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  background-color: #ececec;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px; 
}

#img-box {
  width: 60vw;
}

#nav-bar {
  width: 35vw;
  display: block;
}

nav > ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

li > a {
  text-decoration: none;
  color: #000;
}

#header-img {
  max-width: 300px;
}

section {
  margin-top: 50px;
}

#sign_up, #how_it_works {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#sign_up > form {
  display: block;
  text-align: center;
}

#email {
  padding: 0.25rem 0.50rem;
  border: 1px solid;
  max-width: 275px;
  width: 100%;
}

#submit, button {
  max-width: 150px;
  width: 100%;
  margin: 15px;
  background-color: #f1c40f; 
  border: 0;
  height: 30px;
  cursor: pointer;
  font-weight: 900;
}

input {
  border-radius: 4px;
}

h1 {
  display: block;
  margin-bottom: 20px;
}

#features {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-left: 30px;
}

.feature {
  display: flex;
  flex-direction: row;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20vw;
  height: 125px;
  color: darkorange;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80vw;
  height: 125px;
}

.text h2, p {
  display: block;
  margin: 0;
}

#pricing {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.card {
  border: 1px solid #000000;
  border-radius: 4px;
  max-width: 300px;
  width: 100%;
  padding-bottom: 1rem;
  margin: 0.5rem;
  text-align: center;
}

.header-card {
  background-color: #ddd;
  font-size: 14px;
}

h3, h4 {
  padding: 1rem 0;
  margin: 0;
}

.price {
  font-size: 22px;
}

.description p {
  line-height: 2rem;
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: #ddd;
  text-align: right;
  overflow: hidden;
}

footer > ul {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
}

footer > ul > li {
  padding: 0 1rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media (max-width: 700px) {
  header {
    flex-wrap: wrap;
  }
  nav {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;
  }
  nav > ul {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://kit.fontawesome.com/2545702331.js" crossorigin="anonymous"></script>

<header id="header">
  <div id="img-box">
    <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" id="header-img">
  </div>
  <nav id="nav-bar">
    <ul>
      <li>
        <a href="#features" class="nav-link">Features</a>
      </li>
      <li>
        <a href="#how_it_works" class="nav-link">How It Works</a>
      </li>
      <li>
        <a href="#pricing" class="nav-link">Pricing</a>
      </li>
    </ul>
  </nav>
</header>

<main>
  <section id="sign_up">
    <h1>Handcrafted, home-made masterpieces</h1>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input type="email" name="email" id="email" placeholder="Enter your email address">
      <input type="submit" id="submit" value="GET STARTED">
    </form>
  </section>
  
  <section id="features">
    <div class="feature">
      <div class="icon">
        <i class="fa fa-3x fa-fire"></i>
      </div>
      <div class="text">
        <h2>Premium Materials</h2>
        <p>Our trombones use the shiniest brass which is sourced locally. 
           This will increase the longevity of your purchase.</p>
      </div>
    </div>
    <div class="feature">
      <div class="icon">
        <i class="fa fa-3x fa-truck"></i>
      </div>
      <div class="text">
        <h2>Fast Shipping</h2>
        <p>We make sure you recieve your trombone as soon as we have finished making it. 
           We also provide free returns if you are not satisfied.</p>
      </div>
    </div>
    <div class="feature">
      <div class="icon">
        <i class="fa fa-3x fa-battery-full"></i>
      </div>
      <div class="text">
        <h2>Quality Assurance</h2>
        <p>For every purchase you make, we will ensure there are no damages or faults
           and we will check and test the pitch of your instrument.</p>
      </div>
    </div>
  </section>
  
  <section id="how_it_works">
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/7khUHbQFK9I" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
  </section>
  
  <section id="pricing">
    <div class="card">
      <div class="header-card">
        <h3>TENOR TROMBONE</h3>
      </div>
      <div class="price">
        <h4>$600</h4>
      </div>
      <div class="description">
        <p>Small Size<br>Easy to carry around<br>6 Keys</p>
      </div>
      <div class="button">
        <button type="button">SELECT</button>
      </div>
    </div>
    <div class="card">
      <div class="header-card">
        <h3>BASS TREMBONE</h3>
      </div>
      <div class="price">
        <h4>$900</h4>
      </div>
      <div class="description">
        <p>Medium Size<br>Easy to carry around<br>8 Keys</p>
      </div>
      <div class="button">
        <button type="button">SELECT</button>
      </div>
    </div>
    <div class="card">
      <div class="header-card">
        <h3>VALVE TREMBONE</h3>
      </div>
      <div class="price">
        <h4>$1200</h4>
      </div>
      <div class="description">
        <p>Large Size<br>Professional Look<br>10 Keys</p>
      </div>
      <div class="button">
        <button type="button">SELECT</button>
      </div>
    </div>
  </section>
  
</main>

<footer>
  <ul>
    <li>Privacy</li>
    <li>Terms</li>
    <li>Contact</li>
  </ul>
</footer>

</body>
</html>

Hope it helps you!!

Solution 3 :

To hide the Scrollbar use the overflow-x or overflow-y to hidden for horizontal and vertical scroll bar respectively.

body {

overflow-x: hidden; /* to hide horizontal scrollbarenter code here */
}

Problem :

I am currently doing the FreeCodeCamp course to learn programming HTML/CSS. I had a few problems with the product landing page. This is the website I build so far. As you can see, a ‘scroll bar’ is added below, to move my page from left to right. I would like to know how I can remove this, since I have no content on the far-right?

I initially thought it’s due to my margins/paddings, but I included the following line of code: “box-sizing: border-box”, hence the problems has nothing to do with my margins/paddings (correct me if I’m wrong).

Any help would be greatly appreciated!

This is my code:

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

html {
  scroll-behavior: smooth;
  position: relative;
  min-height: 100%;
}

body {
  background-color: #ececec;
  font-family: Lato;
  margin: 0 0 100px;
  padding: 25px;
}

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  background-color: #ececec;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px; 
}

#img-box {
  width: 60vw;
}

#nav-bar {
  width: 35vw;
  display: block;
}

nav > ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

li > a {
  text-decoration: none;
  color: #000;
}

#header-img {
  max-width: 300px;
}

section {
  margin-top: 50px;
}

#sign_up, #how_it_works {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#sign_up > form {
  display: block;
  text-align: center;
}

#email {
  padding: 0.25rem 0.50rem;
  border: 1px solid;
  max-width: 275px;
  width: 100%;
}

#submit, button {
  max-width: 150px;
  width: 100%;
  margin: 15px;
  background-color: #f1c40f; 
  border: 0;
  height: 30px;
  cursor: pointer;
  font-weight: 900;
}

input {
  border-radius: 4px;
}

h1 {
  display: block;
  margin-bottom: 20px;
}

#features {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-left: 30px;
}

.feature {
  display: flex;
  flex-direction: row;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20vw;
  height: 125px;
  color: darkorange;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80vw;
  height: 125px;
}

.text h2, p {
  display: block;
  margin: 0;
}

#pricing {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.card {
  border: 1px solid #000000;
  border-radius: 4px;
  max-width: 300px;
  width: 100%;
  padding-bottom: 1rem;
  margin: 0.5rem;
  text-align: center;
}

.header-card {
  background-color: #ddd;
  font-size: 14px;
}

h3, h4 {
  padding: 1rem 0;
  margin: 0;
}

.price {
  font-size: 22px;
}

.description p {
  line-height: 2rem;
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: #ddd;
  text-align: right;
  overflow: hidden;
}

footer > ul {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
}

footer > ul > li {
  padding: 0 1rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media (max-width: 700px) {
  header {
    flex-wrap: wrap;
  }
  nav {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;
  }
  nav > ul {
    flex-direction: column;
  }
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://kit.fontawesome.com/2545702331.js" crossorigin="anonymous"></script>

<header id="header">
  <div id="img-box">
    <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" id="header-img">
  </div>
  <nav id="nav-bar">
    <ul>
      <li>
        <a href="#features" class="nav-link">Features</a>
      </li>
      <li>
        <a href="#how_it_works" class="nav-link">How It Works</a>
      </li>
      <li>
        <a href="#pricing" class="nav-link">Pricing</a>
      </li>
    </ul>
  </nav>
</header>

<main>
  <section id="sign_up">
    <h1>Handcrafted, home-made masterpieces</h1>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input type="email" name="email" id="email" placeholder="Enter your email address">
      <input type="submit" id="submit" value="GET STARTED">
    </form>
  </section>
  
  <section id="features">
    <div class="feature">
      <div class="icon">
        <i class="fa fa-3x fa-fire"></i>
      </div>
      <div class="text">
        <h2>Premium Materials</h2>
        <p>Our trombones use the shiniest brass which is sourced locally. 
           This will increase the longevity of your purchase.</p>
      </div>
    </div>
    <div class="feature">
      <div class="icon">
        <i class="fa fa-3x fa-truck"></i>
      </div>
      <div class="text">
        <h2>Fast Shipping</h2>
        <p>We make sure you recieve your trombone as soon as we have finished making it. 
           We also provide free returns if you are not satisfied.</p>
      </div>
    </div>
    <div class="feature">
      <div class="icon">
        <i class="fa fa-3x fa-battery-full"></i>
      </div>
      <div class="text">
        <h2>Quality Assurance</h2>
        <p>For every purchase you make, we will ensure there are no damages or faults
           and we will check and test the pitch of your instrument.</p>
      </div>
    </div>
  </section>
  
  <section id="how_it_works">
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/7khUHbQFK9I" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
  </section>
  
  <section id="pricing">
    <div class="card">
      <div class="header-card">
        <h3>TENOR TROMBONE</h3>
      </div>
      <div class="price">
        <h4>$600</h4>
      </div>
      <div class="description">
        <p>Small Size<br>Easy to carry around<br>6 Keys</p>
      </div>
      <div class="button">
        <button type="button">SELECT</button>
      </div>
    </div>
    <div class="card">
      <div class="header-card">
        <h3>BASS TREMBONE</h3>
      </div>
      <div class="price">
        <h4>$900</h4>
      </div>
      <div class="description">
        <p>Medium Size<br>Easy to carry around<br>8 Keys</p>
      </div>
      <div class="button">
        <button type="button">SELECT</button>
      </div>
    </div>
    <div class="card">
      <div class="header-card">
        <h3>VALVE TREMBONE</h3>
      </div>
      <div class="price">
        <h4>$1200</h4>
      </div>
      <div class="description">
        <p>Large Size<br>Professional Look<br>10 Keys</p>
      </div>
      <div class="button">
        <button type="button">SELECT</button>
      </div>
    </div>
  </section>
  
</main>

<footer>
  <ul>
    <li>Privacy</li>
    <li>Terms</li>
    <li>Contact</li>
  </ul>
</footer>

Comments

Comment posted by Wimanicesir

Add overflow-x:hidden; to your html css.

Comment posted by How do I remove the horizontal scrollbar in a div?

Does this answer your question?

By

Related Post

HTML

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022
HTML

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022
HTML

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022