noobaka
Reputation: 37
How to fix footer overlapping with section
I am new to web development and design. I am trying to create a website with a navbar 3 section and a footer. Everything works fine but the footer is overlapping with the last section. I can't figure out why. I have tried replacing the section with a div but still, it doesn't help. I even tested the HTML on HTML validator. I don't know what I did wrong here. This is my HTML code:
<% layout('boilerplate/boilerplate.ejs') %>
<div class="main-cont">
<section class="first-cont">
<%-include('../partials/navbar')%>
<div class="company-info">
<div class="intro-cont">
<div class="intro intro-text">
<h2>Kick Start Your <br />Company’s Online <br />Journey With Us</h2>
<p>
Take advantage of our services and solutions designed to meet all of
your requirements and take your company online.
</p>
</div>
<div class="intro intro-img">
<img src="/images/artimage.png" alt="" />
</div>
</div>
<div class="clients">
<h2>Our Clients</h2>
<div class="client-logo">
<img src="/images/client1.png" alt="" />
<img src="/images/client2.png" alt="" />
</div>
</div>
</div>
</section>
<section class="second-cont">
<h2 id="solution">Our Solutions</h2>
<div class="pricing-cont">
<div class="pricing">
<div class="pricing-img">
<img src="/images/smallbusiness.png" alt="" />
</div>
<div class="pricing-des">
<h2>Small Business</h2>
<p>Website <br />Web Hosting <br />Domain</p>
<h2><sup>RM</sup>600</h2>
<button class="btn btn-info">Get It</button>
</div>
</div>
<div class="pricing">
<div class="pricing-img">
<img src="/images/mediumbuisness.png" alt="" />
</div>
<div class="pricing-des">
<h2>Medium Business</h2>
<p>
Website or App<br />Web Hosting<br />Domain<br />Logos & Images<br />Google
Business Integration
</p>
<h2><sup>RM</sup>600</h2>
<button class="btn btn-info">Get It</button>
</div>
</div>
<div class="pricing">
<div class="pricing-img">
<img src="/images/largecompany.png" alt="" />
</div>
<div class="pricing-des">
<h2 style="margin-bottom: 2px">Enterprise</h2>
<p style="margin-bottom: 5px; font-size: 12px">
Website & App<br />Web Hosting<br />Domain<br />Logos & Images<br />Google
Business Integration<br />System Maintain
</p>
<h2 style="margin-top: 10px"><sup>RM</sup>600</h2>
<button class="btn btn-info">Get It</button>
</div>
</div>
</div>
</section>
<section class="third-cont">
<div class="whyus whyus-des blue">
<h2 class="text-white display-4 font-weight-bold">Why Choose Us</h2>
<p class="text-white lead">
Our team cares about all the clients <br />
no matter how big or small. The drives us <br />
to provide fanatical support to our clients. <br />
We provide our clients with the best in class <br />
services as per their needs and demands
</p>
</div>
<div class="whyus whyus-img">
<img src="/images/img1.jpeg" alt="" />
</div>
<div class="whyus whyus-img">
<img src="/images/img2.jpeg" alt="" />
</div>
<div class="whyus whyus-des orange">
<p class="text-white lead">
We can prove and show how we <br />
deliver peace of mind, Less Downtime <br />
and Faster problem solutions for your company
</p>
<button class="btn btn-info text-white">Contact Us</button>
</div>
</section>
<div class="footer">
</div>
</div>
and this is my css:
body{
margin: 0;
padding: 0;
}
.navbar{
padding: 10px;
background: #ffffff;
}
.navbar-collapse{
margin-left: 30%;
}
.navbar-collapse > button{
font-family: 'Roboto', sans-serif;
color: #ffffff;
}
.nav-link{
font-family: 'Roboto', sans-serif;
margin-right: 20px;
width: 100px;
}
.first-cont{
height: 100vh;
}
.company-info{
background: url("/images/background1.jpg");
background-size: cover;
background-repeat: no-repeat;
height:90%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.intro-cont{
width: 90%;
background-color: #ffffff90;
margin: 0 auto;
height: 80%;
display: flex;
flex-direction: row;
align-items: center;
padding: 20px;
border-radius: 20px;
}
.intro-text >h2{
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: #DC604B;
font-size: 50px;
transition: font-size 0.8s;
}
.intro-img{
width: 70%;
transition: width 0.8s;
}
.intro-img>img{
width: 100%;
}
.clients{
width: 100%;
background-color: #ffffff;
display: grid;
grid-template-columns: 0.5fr 1fr;
}
.clients >h2{
margin: 10px;
display: flex;
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: #DC604B;
padding: 20px;
}
.client-logo {
display: flex;
flex-direction: row;
padding: 10px;
width: 60%;
justify-content: space-evenly;
align-items: center;
}
.client-logo >img{
width: 30%;
margin: 10px;
}
.second-cont{
background:url("/images/background2.jpg");
background-size: cover;
height: 100vh;
width: 100%;
}
.second-cont>h2{
font-family: 'Roboto',sans-serif;
font-weight: 500;
font-size: 45px;
color: #DC604B;
padding: 40px;
}
.pricing-cont{
display: flex;
width: 90%;
flex-direction: row;
margin: 0 auto;
justify-content: center;
height: 80%;
}
.pricing{
background-color: #ffffff;
margin: 10px;
width: 28%;
border-radius: 20px;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.pricing-img > img{
width: 100%;
}
.pricing-des{
text-align: center;
margin-bottom: 20px;
}
.pricing-des >h2,p{
font-family: 'Sen',sans-serif;
color: #372B7B;
}
.pricing-des>p{
font-size: 15px;
margin: 20px;
}
.pricing-des>h2{
margin-bottom: 10px;
}
.third-cont{
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: repeat(2,1fr);
}
.whyus{
background-color: #DC604B;
width: 100%;
}
.blue{
background-color: #48B9FF;
}
.whyus-des{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.whyus-img>img{
width: 100%;
height: 100%;
}
.whyus >h2,p{
font-family: 'Roboto',sans-serif;
}
.footer{
width: 100%;
height: 300px;
background-color: white;
}
please help me figure it out! Thanks in advance!!
Upvotes: 0
Views: 58
Answers (2)
Sumit Surana
Reputation: 1584
The problem is the 100vh in the CSS for the class .second-cont. If you either remove it or change it to 100% it should fix your issue.
To understand more about what vh does please go through https://developer.mozilla.org/en-US/docs/Web/CSS/length
body {
margin: 0;
padding: 0;
}
.navbar {
padding: 10px;
background: #ffffff;
}
.navbar-collapse {
margin-left: 30%;
}
.navbar-collapse>button {
font-family: 'Roboto', sans-serif;
color: #ffffff;
}
.nav-link {
font-family: 'Roboto', sans-serif;
margin-right: 20px;
width: 100px;
}
.first-cont {
height: 100vh;
}
.company-info {
background: url("/images/background1.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 90%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.intro-cont {
width: 90%;
background-color: #ffffff90;
margin: 0 auto;
height: 80%;
display: flex;
flex-direction: row;
align-items: center;
padding: 20px;
border-radius: 20px;
}
.intro-text>h2 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: #DC604B;
font-size: 50px;
transition: font-size 0.8s;
}
.intro-img {
width: 70%;
transition: width 0.8s;
}
.intro-img>img {
width: 100%;
}
.clients {
width: 100%;
background-color: #ffffff;
display: grid;
grid-template-columns: 0.5fr 1fr;
}
.clients>h2 {
margin: 10px;
display: flex;
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: #DC604B;
padding: 20px;
}
.client-logo {
display: flex;
flex-direction: row;
padding: 10px;
width: 60%;
justify-content: space-evenly;
align-items: center;
}
.client-logo>img {
width: 30%;
margin: 10px;
}
.second-cont {
background: url("/images/background2.jpg");
background-size: cover;
height: 100%;
width: 100%;
}
.second-cont>h2 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 45px;
color: #DC604B;
padding: 40px;
}
.pricing-cont {
display: flex;
width: 90%;
flex-direction: row;
margin: 0 auto;
justify-content: center;
height: 80%;
}
.pricing {
background-color: #ffffff;
margin: 10px;
width: 28%;
border-radius: 20px;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.pricing-img>img {
width: 100%;
}
.pricing-des {
text-align: center;
margin-bottom: 20px;
}
.pricing-des>h2,
p {
font-family: 'Sen', sans-serif;
color: #372B7B;
}
.pricing-des>p {
font-size: 15px;
margin: 20px;
}
.pricing-des>h2 {
margin-bottom: 10px;
}
.third-cont {
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.whyus {
background-color: #DC604B;
width: 100%;
}
.blue {
background-color: #48B9FF;
}
.whyus-des {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.whyus-img>img {
width: 100%;
height: 100%;
}
.whyus>h2,
p {
font-family: 'Roboto', sans-serif;
}
.footer {
width: 100%;
height: 300px;
background-color: white;
}<div class="main-cont">
<section class="first-cont">
<div class="company-info">
<div class="intro-cont">
<div class="intro intro-text">
<h2>Kick Start Your <br />Company’s Online <br />Journey With Us</h2>
<p>
Take advantage of our services and solutions designed to meet all of your requirements and take your company online.
</p>
</div>
<div class="intro intro-img">
<img src="/images/artimage.png" alt="" />
</div>
</div>
<div class="clients">
<h2>Our Clients</h2>
<div class="client-logo">
<img src="/images/client1.png" alt="" />
<img src="/images/client2.png" alt="" />
</div>
</div>
</div>
</section>
<section class="second-cont">
<h2 id="solution">Our Solutions</h2>
<div class="pricing-cont">
<div class="pricing">
<div class="pricing-img">
<img src="/images/smallbusiness.png" alt="" />
</div>
<div class="pricing-des">
<h2>Small Business</h2>
<p>Website <br />Web Hosting <br />Domain</p>
<h2><sup>RM</sup>600</h2>
<button class="btn btn-info">Get It</button>
</div>
</div>
<div class="pricing">
<div class="pricing-img">
<img src="/images/mediumbuisness.png" alt="" />
</div>
<div class="pricing-des">
<h2>Medium Business</h2>
<p>
Website or App<br />Web Hosting<br />Domain<br />Logos & Images<br />Google Business Integration
</p>
<h2><sup>RM</sup>600</h2>
<button class="btn btn-info">Get It</button>
</div>
</div>
<div class="pricing">
<div class="pricing-img">
<img src="/images/largecompany.png" alt="" />
</div>
<div class="pricing-des">
<h2 style="margin-bottom: 2px">Enterprise</h2>
<p style="margin-bottom: 5px; font-size: 12px">
Website & App<br />Web Hosting<br />Domain<br />Logos & Images<br />Google Business Integration<br />System Maintain
</p>
<h2 style="margin-top: 10px"><sup>RM</sup>600</h2>
<button class="btn btn-info">Get It</button>
</div>
</div>
</div>
</section>
<section class="third-cont">
<div class="whyus whyus-des blue">
<h2 class="text-white display-4 font-weight-bold">Why Choose Us</h2>
<p class="text-white lead">
Our team cares about all the clients <br /> no matter how big or small. The drives us <br /> to provide fanatical support to our clients. <br /> We provide our clients with the best in class <br /> services as per their needs and demands
</p>
</div>
<div class="whyus whyus-img">
<img src="/images/img1.jpeg" alt="" />
</div>
<div class="whyus whyus-img">
<img src="/images/img2.jpeg" alt="" />
</div>
<div class="whyus whyus-des orange">
<p class="text-white lead">
We can prove and show how we <br /> deliver peace of mind, Less Downtime <br /> and Faster problem solutions for your company
</p>
<button class="btn btn-info text-white">Contact Us</button>
</div>
</section>
<div class="footer">
</div>
</div>Upvotes: 1
Related Questions
- footer overlaps the content of the page
- Section is overlapping footer and I have tried mentioned solves
- footer overlapping with contents
- HTML footer overlapping with content
- CSS footer overlapping my content
- How to make footer not overlap and positioned properly?
- Stop footer overlapping the content
- How to stop content from overlapping the footer?
- CSS issue: Footer overlapping with above content
- Prevent footer from overlapping