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 >
<img src="64x64.png" alt="image not found /:" />
<nav>
<ul >
<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 href="#"><button>contact</button></a>
</header>
<hr />
<text >
<h1 >
want to make
<div >coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<a href="main.html"><button type="button">Try Now!</button></a>
</body>
</html>CodePudding user response：
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 >
<img src="64x64.png" alt="image not found /:" />
<nav>
<ul >
<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 href="#"><button>contact</button></a>
</header>
<hr />
<text >
<h1 >
want to make
<div >coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<a href="main.html"><button type="button">Try Now!</button></a>
</body>
</html>CodePudding user response：
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);
}
CodePudding user response：
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 >
<img src="64x64.png" alt="image not found /:" />
<nav>
<ul >
<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 href="#"><button>contact</button></a>
</header>
<hr />
<text >
<h1 >
want to make
<div >coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<a href="main.html"><button type="button">Try Now!</button></a>
</body>
</html>