Footer and Form appearing into each other - html

Question

While developing my website I have came across a problem with my footer and form. My footer seems to be appearing through the form on devices but not on the computer and I'm sure this could be issues with widths of devices? So I kept trying to fix it and still haven't been able to fix it. I'm still learning as I go along and I would be grateful if someone could help me get rolling with my website again. code snippets and images below, kindest regards, Caelan.
body {
background-color: black ;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3{
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a{
text-decoration: none;
}
.gallery{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content{
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: .4s;
background-color: whitesmoke;
}
.content:hover{
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: .6s;
}
.productcard-image{
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p{
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6{
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card{
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list{
padding: 5px;
}
.fa{
color: #ff9f43;
font-size: 26px;
transition: .4s;
}
.fa:hover{
transform: scale(1.3);
transition: .6s;
}
.productcardbutton{
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border:0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1{
background-color: #2183a2;
}
.buy-2{
background-color: #3b3e6e;
}
.buy-3{
background-color: #0b0b0b;
}
#media(max-width: 1000px){
.content{
width: 46%;
}
}
#media(max-width: 750px){
.content{
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
margin-bottom: -60vh;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type=submit]{
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type=submit]:hover{
background: rgb(19, 41, 238);
}
#media screen and (max-width:600px) {
.form1{
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this
christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br>
<form action="">
<input type="email" name="email" id="email" placeholder="Enter your email">
<input type="text" name="name" id="name" placeholder=" Enter your name">
<textarea name="message" id="message" cols="30" rows="10" placeholder="Enter your message here"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<p class="website__rights">© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved</p>
<div class="social__icons">
</div>
</div>
</section>
</div>
</body>
</html>

Answer 1

I've adjusted the css to remove the height and margin on the containers:
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</section>
</div>
</body>
</html>