bottom scroll bar is visible but when I remove it it messes everything up

user_17274150 0
Viewed 37

I started making a landing page for a coin counting website, but for no reason, I have a bottom x scrollbar but when I try to remove it with overflow-x it messes everything up. I think the title is causing the scrollbar to appear but IDK why or what style is causing it. I started a couple of weeks ago so I don't know a lot.

 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #24252a;
  font-family: monospace, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #edf0f1;
}

li,
a,
button {
  font-family: monospace, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #edf0f1;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}

.logo {
  margin-right: auto;
}
.nav__links {
  list-style: none;
}
.nav__links li {
  display: inline-block;
  padding: 0px 20px;
}
.nav__links li a {
  transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
  color: #834bef;
}
button {
  margin-left: 20px;
  padding: 9px 25px;
  background-color: #834bef;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}
button:hover {
  background-color: #4400ff;
}
.title {
  font-size: 240%;
  position: relative;
  left: 80px;
  top: 120px;
  color: white;
}
.text {
  background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
  background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 100%;
}
.cta {
  background: #834bef;
  position: relative;
  top: 160px;
  left: 65px;
  font-size: 1.5rem;
}
.cta:hover {
  background: #4400ff;
}
 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Coin Counter</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="header">
      <img class="logo" src="64x64.png" alt="image not found /:" />
      <nav>
        <ul class="nav__links">
          <li><a href="about.html">about</a></li>
          <li><a href="donate.html">donate</a></li>
          <li><a href="#">home</a></li>
        </ul>
      </nav>
      <a class="contact" href="#"><button>contact</button></a>
    </header>
    <hr />
    <text class="text">
      <h1 class="title">
        want to make
        <div class="gradient">coin-counting</div>
        easier? try Coin Counter!
      </h1>
    </text>
    <a href="main.html"><button class="cta" type="button">Try Now!</button></a>
  </body>
</html>

css html
3 Answers

Please try the below code that i have pasted, I hope it will work as expected .

let me tell you that what was the issue - using "position: relative" for "title" class was causing issue .

And it is always good to use font-size in pixel instead of using in percentage like you are doing .. to adjust the content always ensure to use spacing like margin and padding .

happy coding .

 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #24252a;
  font-family: monospace, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #edf0f1;
}

li,
a,
button {
  font-family: monospace, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #edf0f1;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}

.logo {
  margin-right: auto;
}
.nav__links {
  list-style: none;
}
.nav__links li {
  display: inline-block;
  padding: 0px 20px;
}
.nav__links li a {
  transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
  color: #834bef;
}
button {
  margin-left: 20px;
  padding: 9px 25px;
  background-color: #834bef;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}
button:hover {
  background-color: #4400ff;
}
.title {
  font-size: 30px;
  margin-top: 60px;
  margin-left: 60px;
  left: 80px;
  top: 120px;
  color: white;
}
.text {
  background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
  background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 100%;
}
.cta {
  background: #834bef;
  position: relative;
  top: 160px;
  left: 65px;
  font-size: 1.5rem;
}
.cta:hover {
  background: #4400ff;
}
 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Coin Counter</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="header">
      <img class="logo" src="64x64.png" alt="image not found /:" />
      <nav>
        <ul class="nav__links">
          <li><a href="about.html">about</a></li>
          <li><a href="donate.html">donate</a></li>
          <li><a href="#">home</a></li>
        </ul>
      </nav>
      <a class="contact" href="#"><button>contact</button></a>
    </header>
    <hr />
    <text class="text">
      <h1 class="title">
        want to make
        <div class="gradient">coin-counting</div>
        easier? try Coin Counter!
      </h1>
    </text>
    <a href="main.html"><button class="cta" type="button">Try Now!</button></a>
  </body>
</html>

user_73380830

You were correct that the title class was causing a problem.

It had been given a left position. But it also had remained at the default display: block - the 'extra' scroll part was caused by the addition of theleft: 80px

This snippet gives it display: inline-block:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #24252a;
  font-family: monospace, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #edf0f1;
}

li,
a,
button {
  font-family: monospace, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #edf0f1;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}

.logo {
  margin-right: auto;
}
.nav__links {
  list-style: none;
}
.nav__links li {
  display: inline-block;
  padding: 0px 20px;
}
.nav__links li a {
  transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
  color: #834bef;
}
button {
  margin-left: 20px;
  padding: 9px 25px;
  background-color: #834bef;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}
button:hover {
  background-color: #4400ff;
}
.title {
  font-size: 240%;
  position: relative;
  left: 80px;
  top: 120px;
  color: white;
  display: inline-block;
}
.text {
  background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
  background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 100%;
}
.cta {
  background: #834bef;
  position: relative;
  top: 160px;
  left: 65px;
  font-size: 1.5rem;
}
.cta:hover {
  background: #4400ff;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Coin Counter</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="header">
      <img class="logo" src="64x64.png" alt="image not found /:" />
      <nav>
        <ul class="nav__links">
          <li><a href="about.html">about</a></li>
          <li><a href="donate.html">donate</a></li>
          <li><a href="#">home</a></li>
        </ul>
      </nav>
      <a class="contact" href="#"><button>contact</button></a>
    </header>
    <hr />
    <text class="text">
      <h1 class="title">
        want to make
        <div class="gradient">coin-counting</div>
        easier? try Coin Counter!
      </h1>
    </text>
    <a href="main.html"><button class="cta" type="button">Try Now!</button></a>
  </body>
</html>

user_108674540

you are setting left property for title tag which shift the content right side from that left amount so it needs to show a horizontal scroll bar to view the content shifted from the viewing area.

You can resolve it by changing the left property to margin-left like in below code

.title {
  font-size: 240%;
  position: relative;
  margin-left: 80px;
  top: 120px;
  color: white;
}

other wise you can set the width of the title by reducing the shifted value from it like below

.title {
  font-size: 240%;
  position: relative;
  left: 80px;
  top: 120px;
  color: white;
  width: calc(100% - 80px);
 }
user_167925790
Related