CODEWITHSUNDEEP
htmlcss
user19473497
user19473497

Reputation:

My footer is creating mini horizontal scroll

im working in my final proyect to become a Web Developer, and im struggling with my footer, that is creating a minimum horizontal scroll and I cant find why.

I've been doing tests and I can't get rid of that horizontal scroll. An answer as soon as possible would be of great help to me, since this is my final project.

footer {
  position: absolute;
  bottom: 100;
  left: 0;
  right: 0;
  background: #111;
  height: auto;
  width: 100%;
  padding-top: 40px;
  color: #fff;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  h3 {
    font-size: 2rem;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 4rem;
    color: yellow;
  }
}

.socials {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  li {
    margin: 0 0px;
  }
  a {
    text-decoration: none;
    color: #fff;
    padding: 5px;
    &:hover {
      color: rgb(255, 251, 0);
      transition-duration: 1s;
    }
  }
}

.footer-bottom {
  background: #000;
  width: 100%;
  padding: 20px;
  padding-bottom: 40px;
  text-align: center;
  p {
    display: flex;
    justify-content: flex-start;
    font-size: 14px;
    word-spacing: 2px;
    text-transform: capitalize;
    a {
      color: yellow;
      font-size: 16px;
      text-decoration: none;
    }
  }
}

@media (max-width: 830px) {
  .socials li {
    font-size: 14px;
  }
}
<footer>
  <div class="footer-content">
    <h3>KURT BURGERS</h3>
    <ul class="socials">
      <li><a href="https://www.mardelplata.gob.ar/defensadelconsumidor">DEFENSA AL CONSUMIDOR</a></li>
      <li><a href="https://www.rappi.com.ar/">DELIVERY</a></li>
      <li><a href="paginas/politicasprivacidad.html">POLITICAS DE PRIVACIDAD</a></li>
    </ul>
  </div>
  <div class="footer-bottom">
    <p>copyright &copy; <a href="#">KURT BURGERS</a> </p>
  </div>
</footer>

Upvotes: 0

Views: 96

Answers (3)

Huangism
Huangism

Reputation: 16438

The reason why you get the scrollbar is because footer-bottom's width is 100% + the 20px padding you have set for each side of the element. If you add padding to an element with a width, the padding will be added on top of the width unless you set box-sizing: border-box;

You could add border-box to footer-bottom as a solution but what you should really do is remove the width 100% from footer-bottom because it is a block element already and it will take up the 100% width by default so there is no need to set it.

The same thing applies to the ul .socials, it has natural padding on the tag so when you set width 100% to it, it will be wider than 100%. In the case of this ul, I simply added padding: 0

In the below snippet, I have removed the width 100% from footer-bottom and I added some minor css to body so it is easier to see your content width.

body,
html {
  padding: 0;
  margin: 0;
}

footer {
  position: absolute;
  bottom: 100;
  left: 0;
  right: 0;
  background: #111;
  height: auto;
  width: 100%;
  padding-top: 40px;
  color: #fff;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.footer-content h3 {
  font-size: 2rem;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 4rem;
  color: yellow;
}

.socials {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
}

.socials li {
  margin: 0 0px;
}

.socials a {
  text-decoration: none;
  color: #fff;
  padding: 5px;
}

.footer-bottom {
  background: #000;
  padding: 20px;
  padding-bottom: 40px;
  text-align: center;
  p {
    display: flex;
    justify-content: flex-start;
    font-size: 14px;
    word-spacing: 2px;
    text-transform: capitalize;
    a {
      color: yellow;
      font-size: 16px;
      text-decoration: none;
    }
  }
}

@media (max-width: 830px) {
  .socials li {
    font-size: 14px;
  }
}
<footer>
  <div class="footer-content">
    <h3>KURT BURGERS</h3>
    <ul class="socials">
      <li><a href="https://www.mardelplata.gob.ar/defensadelconsumidor">DEFENSA AL CONSUMIDOR</a></li>
      <li><a href="https://www.rappi.com.ar/">DELIVERY</a></li>
      <li><a href="paginas/politicasprivacidad.html">POLITICAS DE PRIVACIDAD</a></li>
    </ul>
  </div>
  <div class="footer-bottom">
    <p>copyright &copy; <a href="#">KURT BURGERS</a> </p>
  </div>
</footer>

Upvotes: 1

mohamed yassine khabthani
mohamed yassine khabthani

Reputation: 48

I copied your code and removed the width:100% from .footer-bottom the horizontal scroll disappeared.

Upvotes: 1

Harry Theo
Harry Theo

Reputation: 784

You are missing this from your styles:

* {
    box-sizing: border-box;
}

Upvotes: 0

Related Questions