I am very new to bootstrap 5 and website development overall. I set myself a challenge a little while ago in making a responsive website. I've created a responsive desktop one, and now wish to create it on mobile devices. So far it was going all well until my content started appearing vertically with no padding and with 100%. It was not responding correctly, so far this has only happened with my footer and my contact divs. I am not exactly sure why, this has happened as it is working fine on desktop version. I've tried moving content around with position to no success. Any help would be grand!
/*Main*/
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
background-color: #0f2471;
font-family: 'Poppins', sans-serif;
}
/*NavBar ;*/
#logo-space{
width: auto;
height: auto;
;
}
#logo-space img{
width: auto;
height: auto;
position: relative;
left: 2.5rem;
}
#fms-btn{
width: 120px;
position: relative;
top: 1rem;
right: 2rem;
height: 60px;
font-size: 1rem;
justify-content: center;
text-decoration: none !important;
background-color: #030b29;
color: white;
}
.nav-bar{
background-color: #16377e;
position: relative;
}
#navbar-space .nav-link{
position: relative;
left: 4rem;
}
#memberCount{
background-image: url("../img/l1.png");
background-position: center;
background-size: cover;
height: 25%;
}
#why{
color: white;
text-align: center;
font-size: 220%;
padding-bottom: 50px;
font-weight: bold;
}
#memberCount h1{
color: white;
font-size: 300%;
text-align: center;
position: relative;
bottom: 2rem;
}
#memberCount h3{
color: white;
font-size: 180%;
text-align: center;
position: relative;
bottom: 2rem;
}
#gallery{
width: 100%;
height: 45%;
background-color: white;
}
#gallery-title{
color: black;
text-align: center;
font-size: 220%;
padding-bottom: 20px;
font-weight: bold;
}
#gallery-comment{
text-align: center;
}
.gallery-button{
width: 10rem;
height: 3rem;
font-size: 15px;
text-decoration: none !important;
background-color: #030b29;
color: white;
position: relative;
text-align: center;
position: relative;
left: 1rem;
}
.gallery-button:hover{
background-color: #030b29;
font-weight: bold;
color: white;
}
#contact{
background-image: url("../img/l2.png");
background-position: center;
background-size: cover;
height: 45%;
}
#contact-statement{
color: white;
text-align: center;
font-size: 220%;
padding-bottom: 50px;
font-weight: bold;
margin-top: 100px;
position: relative;
right: 100px;
}
#contact-statement-left{
position: relative;
right: 2rem;
}
#contact-final{
color: white;
text-align: center;
padding-bottom: 50px;
margin-top: 100px;
position: relative;
right: 100px;
}
#contact-button{
position: relative;
background-color: #030b29;
left: 5px;
}
#footer{
color: white;
background-color: #16377e;
height: auto;
width: auto;
}
#footer a{
color: white;
text-decoration: none;
text-align: center;
}
#footer a:hover{
text-decoration: underline;
}
.gallery-redirect{
width: 25px;
height: 25px;
}
/*responsive*/
@media(max-width: 800px){
body{
margin: 0;
font-family: 'Poppins', sans-serif;
}
#logo-space{
width: auto;
height: 160px;
position: relative;
right: 2rem;
}
#fms-btn{
width: 100px;
height: 40px;
font-size: 12px;
text-decoration: none !important;
background-color: #030b29;
color: white;
padding: 0;
position: relative;
left: 3rem;
top: -1rem;
}
#why{
color: white;
text-align: center;
font-size: 150%;
font-weight: bold;
padding-bottom: 25px;
}
#memberCount{
background-image: url("../img/l1.png");
background-position: center;
background-size: cover;
height: 15%;
}
#memberCount h1{
color: white;
padding-top: 50px;
font-size: 150%;
}
#memberCount h3{
color: white;
font-size: 80%;
}
#gallery{
width: 100%;
height: 100%;
background-color: white;
}
#gallery img{
width: 150px;
border: none;
padding: 5px;
float: left;
position: relative;
bottom: 5rem;
left: 25px;
}
#gallery-title{
color: black;
text-align: center;
font-size: 220%;
padding-bottom: 20px;
font-weight: bold;
}
#gallery-comment{
text-align: center;
}
.gallery-button{
width: 12rem;
height: 3rem;
font-size: 15px;
text-decoration: none !important;
background-color: #030b29;
color: white;
position: relative;
text-align: center;
position: relative;
left: 1rem;
}
.gallery-redirect{
width: 6px;
height: 6px;
float: left;
}
#footer{
color: white;
background-color: #16377e;
height: auto;
width: 100%;
}
#footer a{
color: white;
text-decoration: none;
text-align: center;
}
}<!DOCTYPE html>
<html>
<!--When Site is finished, check all compats-->
<head>
<title>Testing</title>
<!--CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#home-img{
/* to remove space between images, because car image has this wave and page background would be visable */
margin-bottom: -86px;
}
#home-img img{
object-fit: cover;
width: 100%;
height: 75vh;
}
#about-us{
background-image: url('./img/l3.png');
background-position: center;
background-size: cover;
z-index: 2;
/* probably padding needed */
padding: 25vh 0;
color: white;
height: 75vh;
}
#about-title{
font-weight: bold;
font-size: 45px;
}
#about-text{
font-size: large;
}
#learn-more-btn{
width: 15rem;
font-size: 20px;
text-decoration: none !important;
background-color: #030b29;
color: white;
}
@media(max-width: 767px){
body{
margin: 0;
font-size: small;
font-family: 'Poppins', sans-serif;
}
#about-text{
font-size: small;
width: 15rem;
position: relative;
bottom: 20px;
font-size: small;
}
#about-title{
font-weight: bold;
font-size: 20px;
}
#learn-more-btn{
width: 5rem;
font-size: 15px;
text-decoration: none !important;
background-color: #16377e;
color: white;
position: relative;
right: 1rem;
text-align: center;
}
#redirect-symbol{
position: relative;
left: 3px;
}
}
</style>
</head>
<body style="margin: 0;">
<!--Logo Space-->
<div id="logo-space">
<div class="row">
<div class="col">
<img src="img/logo.png" class="image-fluid" alt="">
</div>
<button id="fms-btn" type="button" class="btn mx-4 m-3">
<span class="text-center" style="text-decoration: none;">Head to FMS</span>
</button>
</div>
</div>
<!--Nav Bar
<a class="nav-link text-white" href="#appeals" style="font-weight: bold;">FMS</a>
-->
<div id="home">
<nav id="navbar-space" class="navbar navbar-expand-lg nav-bar">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active text-white" aria-current="page" href="#home">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link text-white " href="#divisions">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white " href="#appeals">APPEALS</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Top image GTA, there is no text so it can be <img> tag -->
<div id="home-img" style="position: relative; z-index: 2;">
<section id="carouselSection" class="home carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x700" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x700" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x700" class="d-block w-100 img-fluid" alt="...">
</div>
</div>
</section>
</div>
<!-- About us section, with car in background -->
<div id="about-us" style="position: relative; z-index: 3;">
<!-- Your regular columns and content -->
<div class="container-md">
<div class="row justify-content-center">
<div id="about-title" class="col-4 about-text-header">
<span style="text-decoration: none;">Who are we?</span>
<div class="row" class="">
<button id="learn-more-btn" type="button" class="btn mx-4 m-3">
<img id="redirect-symbol" src="img/redirect.png" class="text-center" alt="" width="30" height="30" style="padding-right: 5px;">
<span class="text-center" style="text-decoration: none;">Learn More</span>
</button>
</div>
</div>
<div id="about-text" class="col-4 text-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil tempore cumque cupiditate alias nostrum ad beatae neque mollitia. Molestiae blanditiis voluptatum necessitatibus dolore omnis iure tenetur repellendus quis consequatur magni.
<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum quo, ducimus tempore sit mollitia reprehenderit.
</p>
</div>
</div>
</div>
</div>
<div id="why-us">
<div class="row">
<p id="why" class="h1">With so much competition out there why us?</p>
</div>
</div>
<div id="memberCount">
<div class="container-sm">
<div style="color: white;" class="row align-items-center justify-content-center py-xxl-5">
<div class="col-4 p-xxl-5">
<h1>50+</h1>
<h3>Member Count</h3>
</div>
<div class="col-4 p-xxl-5">
<h1>6</h1>
<h3>Divisions</h3>
</div>
<div class="col-4 p-xxl-5">
<h1>30+</h1>
<h3>Average Patrol Count</h3>
</div>
</div>
</div>
</div>
<div id="gallery" class="">
<div class="container-fluid">
<div class="row float-lg-start" style="padding-right: 5rem; padding-top: 5rem;">
<div class="col-sm mx-5">
<h2 id="gallery-title" class="">Check out our <br>
Gallery
</h2>
<p id="gallery-comment" class="lead">Here is some of the best <br>
screenshots this month!
</p>
<button id="" type="button" class="btn m-3 gallery-button">
<img id="redirect-symbol" src="img/redirect.png" class="text-center gallery-redirect" alt="" style="padding-right: 5px;">
<span class="text-center" style="text-decoration: none;">Learn More</span>
</button>
<button id="" type="button" class="btn m-3 gallery-button">
<span class="text-center" style="text-decoration: none;"><i class="fa-brands fa-square-twitter fa-xl" style="padding-right: 1rem;"></i>Follow us</span>
</button>
</div>
</div>
<div style="padding-top: 5rem;">
<img src="https://via.placeholder.com/300x250" style = "padding-right: 1rem;" class="rounded mx-auto d-block float-sm-start img-thumbnail" alt="...">
<img src="https://via.placeholder.com/300x250" style = "padding-right: 1rem;" class="rounded mx-auto d-block float-sm-start img-thumbnail" alt="...">
<img src="https://via.placeholder.com/300x250" style = "padding-right: 1rem;" class="rounded mx-auto d-block float-sm-start img-thumbnail" alt="...">
<img src="https://via.placeholder.com/300x250" style = "padding-right: 1rem;" class="rounded mx-auto d-block float-sm-start img-thumbnail" alt="...">
</div>
</div>
</div>
<div id="contact" class="">
<div class="container-sm">
<div class="row justify-content-center">
<div id="contact-statement" class="col-4 about-text-header" style="">
<span class="" style="text-decoration: none;;">If you like what you</span> <span id="contact-statement-left"><br>see then apply!</span>
</div>
<div id="contact-final" class="col-4 text-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil tempore cumque cupiditate alias nostrum ad beatae neque mollitia. Molestiae blanditiis voluptatum necessitatibus dolore omnis iure tenetur repellendus quis consequatur magni.
<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum quo, ducimus tempore sit mollitia reprehenderit.
</p>
<button id="contact-button" type="button" class="btn m-3 gallery-button justify-content-center">
<img id="redirect-symbol" src="img/redirect.png" class="text-center" alt="" width="25" height="25" style="padding-right: 5px;">
<span class="text-center" style="text-decoration: none;">Apply now!</span>
</button>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row text-center">
<div class="col-md-2 pt-5">
<ul class="list-unstyled list-spaced">
</ul>
</div>
<div class="col-md-2 offset-md-1 mb-5 pt-5">
<ul class="list-unstyled list-spaced">
<li class="mb-2"><h6 class="text-uppercase">Headers</h6></li>
<li><a href="">About Us</a></li>
<li><a href="">Feed</a></li>
<li><a href="">Divisions</a></li>
<li><a href="">Updates</a></li>
</ul>
</div>
<div class="col-md-2 pt-5">
<ul class="list-unstyled list-spaced">
<li class="mb-2"><h6 class="text-uppercase">Application</h6></li>
<ul class="list-unstyled list-spaced">
<li><a href="">Apply</a></li>
<li><a href="">FMS Login</a></li>
<li><a href="">Appeal</a></li>
<li><a href="">Recruitment</a></li>
</ul>
</ul>
</div>
<div class="col-md-2 pt-5">
<ul class="list-unstyled list-spaced">
<li class="mb-2"><h6 class="text-uppercase">Social Media</h6></li>
<ul class="list-unstyled list-spaced">
<li><a href="">Twitter</a></li>
<li><a href="">Youtube</a></li>
<li><a href="">Discord</a></li>
</ul>
</ul>
</div>
</div>
</div>
</body>
</html>