I’m trying to have my web page not have a horizontal scroll bar when the browser is adjusted. Currently my main page creates a horizontal bar when it becomes to small. This doesn’t happen on any of my other pages which makes me think its the body of the main mage where this is occurring not in my nav bar or footer because I use the same nav bar and footer on my other pages and they scale without a horizontal bar.
.header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
width: 100%;
height: 70px;
padding: 0 20px;
background-color: white;
top: 0;
left: 0;
}
.topnav{
width: 100%;
height: calc(100vh / 10);
background-color: #2B78E4;
display: flex;
align-items: center;
/*justify-content: space-between;*/
}
.topnav a{
text-decoration: none;
color: black;
font-family: "Helvetica", sans-serif;
}
.helmet-logo {
width: 70px;
height: 70px;
}
.dropbtn {
background-color: #fff1f1;
color: Black;
padding: 8px 16px;
}
.dropdown {
position: relative;
display: inline-block;
padding: 8px 16px;
font-style: inherit;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #f6f6f6;
}
.nav-btn{
background-color: #fff1f1;
color: Black;
padding: 8px 16px;
}
#login-btn{
position: relative;
display: inline-block;
margin-left: auto;
}
#signUp-btn{
position: relative;
display: inline-block;
float: right;
padding-left: 20px;
}
#login-btn, #signUp-btn {
float: right;
}
#nav-teams{
position: relative;
padding-left: 20px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
padding: 0;
font-family: "Helvetica", sans-serif;
background-color: #666666;
}
footer {
background-color: #999999;
background-size: 50px;
height : calc(100vh/8);
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.footer-links {
/* Set the display property to flex */
display: flex;
/* Align the links vertically */
align-items: center;
}
.footer-links a {
/* Set the color of the links */
color: black;
/* Add some margin to the right of the links */
margin-left: 20px;
}
.main-home{
background-color: #3030F1;
background-image: url("images/field-banner.jpg");
background-position: center;
background-size: cover;
margin: 0;
padding-top: 300px;
padding-bottom: 300px;
text-align: center;
box-sizing: border-box;
}
.main-home #main-title{
background-color: #dddddd;
margin: 0;
display: inline-block;
align-content: center;
font-size: 72px;
}
@media (max-width: 768px) {
.main-home #main-title {
font-size: 36px; /* Adjust the font size for smaller screens */
}
}
.main-home #sub-title{
background-color: #dddddd;
display: inline-block;
align-content: center;
}
.main-home .main-btns a{
text-decoration: none;
color: black;
padding: 70px 40px 70px 40px;
font-size: 18px;
}
.main-body-btn{
min-width: 150px;
height: 5%;
display: inherit;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>College Football Archive</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<header>
<div class="topnav" id="myTopnav">
<a href = homepage.html>
<img src="images/fb-helmet.png" alt="Logo" class = "helmet-logo">
</a>
<div class="teams-btn" id="nav-teams">
<button class="nav-btn" ><a href="Teams.html">Teams</a></button>
</div>
<div class="dropdown">
<button class="dropbtn">Seasons
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="Seasons.html">2022</a>
<a href="www.collegefbarchive.com/seasons/2021">2021</a>
<a href="www.collegefbarchive.com/seasons/2020">2020</a>
</div>
</div>
<div id="login-btn">
<button class = "nav-btn" ><a href="SignIn.html">Log In</a></button>
</div>
<div id="signUp-btn">
<button class="nav-btn" ><a href ="Signup.html">Sign Up</a></button>
</div>
</div>
</header>
<body>
<div class = "main-home">
<h1 class = "titles" id = "main-title">College Football Archive</h1>
<div>
<h2 class = "titles" id = "sub-title"> The place for College Football Scores</h2>
</div>
<div class = "main-btns">
<span>
<button class="main-body-btn" id="main-teams-btn" href="Teams.html">
<a href="Teams.html" >Teams</a>
</button>
<button class="main-body-btn" id="main-seasons-btn" href="Seasons.html">
<a href="Seasons.html" >Seasons</a>
</button>
</span>
</div>
</div>
<script src="" async defer></script>
</body>
<footer>
<div class="footer-logo">
<a href = homepage.html>
<img src="images/fb-helmet.png" alt="Logo" class="helmet-logo">
</a>
</div>
<div class="footer-links">
<a href="Contact.html">Contact Us</a>
<a href="Terms%20of%20Use.html">Terms of Use</a>
</div>
</footer>
</html>
2
Answers
Since we don’t have access to your image folder, we can’t see a horizontal scroll bar. But my suggestion is to edit your
.helmet-logclass CSS styles so that it is not rigidly taking up thewidthof70px. It is better to use responsive units; such asvwor%.Your header is wider than the viewport, so there’s a scrollbar.
If your main goal is to have no horizontal scrollbar, then you can just set
body { overflow-x: hidden; }.But if I were you, I would pay attention to the fact that the header is wider than the viewport. ))
It is best to use css media query, for example – replace links text in header to icons.