On some resolutions there are white areas where the navbar and a container are not filling the screen completely.
I’m using bootstrap 5 and my page consists of a Navbar at the top, a container in the middle which is split in half (Which then causes the container to expand for whatever reason) with an image on the right (Causes big gaps next to the navbar and lower container) and a lower container.
With all features enabled.
When removing the lines which split the middle container in half, no element of the page extends to the very right which makes no sense as when I hover over everything in inspect element it says nothing covers that space.
No clue what is causing the page to extend.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>VoonBoxel</title>
<link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
<!--<script src="parallax.js"></script>-->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="px-2 container-fluid">
<a href="" class="nav-link nav-icon nav-logo"><img src="../logo.png" style="width:100px;height:100px;" /></a>
<div style="width:10px;"></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active nav-icon" aria-current="page" href="#" style="font-size: 20px;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link nav-icon" href="#" style="font-size: 20px;">Features</a>
</li>
<li class="nav-item">
<a class="nav-link nav-icon" href="#" style="font-size: 20px;">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</div>
</nav>
<div class="bg-light bg-gradient container-fluid">
<div class="row">
<p>text</p>
<!--<div class="p-5 column col-lg-6">
<h2 style="text-align: left;">Welcome to</h2>
<div style="height: 1vh;"></div>
<h1 style="text-align: left;">My dummy page</h1>
</div>
<div class="column col-lg-6 menu-code-img d-none d-lg-block">
<img src="../menu.png" class="shadow"></img>
</div>-->
</div>
</div>
<div class="p-3 bg-secondary bg-gradient container-fluid">
<h2 style="text-align: left;">Our Projects</h2>
<p class="my-3" style="font-size:25px;">Some cool strapline, I'm not creative</p>
<div class="d-flex flex-row">
<div class="card mx-auto my-4 col-lg-6" style="width: 20rem;">
<img class="card-img-top" src="../card1.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Generic Game #01</h5>
<p class="card-text">Our first commercially successful project. Some more useless details about the project and maybe some stats idk</p>
<a href="https://roblox.com" class="btn btn-primary">Check it out!</a>
</div>
</div>
<div class="card mx-auto my-4 col-lg-6" style="width: 20rem;">
<img class="card-img-top" src="../card1.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Generic Game #01</h5>
<p class="card-text">Our first commercially successful project. Some more useless details about the project and maybe some stats idk</p>
<a href="https://roblox.com" class="btn btn-primary">Check it out!</a>
</div>
</div>
<div>
</div>
</body>
</html>
@import "../node_modules/bootstrap/scss/bootstrap";
.container-fluid { padding: 0; }
.nav-icon:hover {
background-color: rgb(17, 16, 27);
}
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.menu-code-img {
text-align: right;
}
Any help would be great, thanks 😛
New contributor
Hugo Marcinek is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.