Why is my footer covering up all my main content when I resize my screen to mobile except my nav-CodePudding

When I resize my screen to mobile view my footer just covers all my content with no scroll bar and no matter how tall I make the window it is still covering all of the content. And another weird thing is it is not covering my navigation menu when it's covering the content instead. I have tried other posts but couldn't something useful.

snippet to my website

body {
  margin: 0px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  height: 100%;
  width: 100%;
}

.nav {
  background-color: orangered;
  margin: 0px;
  padding: 20px;
  text-align: center;
}

.nav a {
  text-decoration: none;
  color: white;
  font-size: 140%;
  margin: 15px;
}

.nav a:hover {
  background-color: rgb(69, 69, 69, 0.3);
  padding: 10px;
  border-radius: 5px;
  transition: 0.4s;
}

* {
  box-sizing: border-box;
}

.main-con {
  border: solid;
  float: left;
  width: 60%;
  padding: 0 20px;
  height: 90%;
  background-color: crimson;
}

.sid-bar {
  border: dotted;
  background-color: burlywood;
  float: left;
  width: 40%;
  padding: 15px;
  margin-top: 0px;
  text-align: center;
  height: 90%;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .main-con,
  .sid-bar {
    width: 100%;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  box-sizing: border-box;
  text-decoration: none;
}

footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #111;
}

footer .content {
  max-width: 1350px;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer .content p,
a {
  color: #fff;
}

footer .content .box {
  width: 33%;
  transition: all 0.4s ease;
}

footer .content .topic {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

footer .content p {
  text-align: justify;
}

footer .content .lower .topic {
  margin: 24px 0 5px 0;
}

footer .content .lower i {
  padding-right: 16px;
}

footer .content .middle {
  padding-left: 80px;
}

footer .content .middle a {
  line-height: 32px;
}

footer .content input[type="text"] {
  height: 45px;
  width: 100%;
  outline: none;
  color: #d9d9d9;
  background: #000;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 17px;
  border: 2px solid #222222;
}

footer .content input[type="submit"] {
  height: 42px;
  width: 100%;
  font-size: 18px;
  color: #d9d9d9;
  background: #eb2f06;
  outline: none;
  border-radius: 5px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 12px;
  border: 2px solid #eb2f06;
  transition: all 0.3s ease-in-out;
}

.content input[type="submit"]:hover {
  background: none;
  color: #eb2f06;
}

footer .bottom {
  width: 100%;
  text-align: right;
  color: #d9d9d9;
  padding: 0 40px 5px 0;
}

footer .bottom a {
  color: #eb2f06;
}

footer a {
  transition: all 0.3s ease;
}

footer a:hover {
  color: #eb2f06;
}

@media (max-width:1100px) {
  footer .content .middle {
    padding-left: 50px;
  }
}

@media (max-width:950px) {
  footer .content .box {
    width: 50%;
  }
  .content {
    margin-top: 40px;
  }
}

@media (max-width:560px) {
  footer {
    position: relative;
  }
  footer .content .box {
    width: 100%;
    margin-top: 30px;
  }
  footer .content .middle {
    padding-left: 0;
  }
}

img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="icon" href="img/logo.png">
  <title>The Random Stuff Blog - A Blog That Is About - Ramdom Topics - Free For All</title>
</head>

<body>
  <nav >
    <a href="index.html" title="Home">Home</a>
    <a href="articles.html" title="Articles">Articles</a>
    <a href="about.html" title="About">About</a>
    <a href="contact.html" title="Contact">Contact</a>
  </nav>

  <div  title="Main Content">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div  title="Side Bar">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>

  <footer>
    <div >
      <div >
        <div >
          <div >About us</div>
          <p>The Random stuff blog is all about intresting random stuff that you might need, we post once a week and is constently being updated.</p>
        </div>
        <div >
          <div >Contact us</div>
          <div >
            <a href="#"><i ></i>###-###-####</a>
          </div>
          <div >
            <a href="#"><i ></i>[email protected]</a>
          </div>
        </div>
      </div>
      <div >
        <div >Our Articles</div>
        <div><a href="#">Coding</a></div>
        <div><a href="#">Life</a></div>
        <div><a href="#">Crafts</a></div>
        <div><a href="#">Facts</a></div>
        <div><a href="#">Education and Laarning</a></div>
        <div><a href="#">More!</a></div>
      </div>
    </div>
    <div >
      <p>Copyright © 2022 <a href="index.html">The Random stuff blog</a> All rights reserved</p>
    </div>
  </footer>

</body>

</html>

CodePudding user response：

So I kind of went through and cleaned up the whole thing. It appears you were trying hard to solve the issue with your use of media queries. I went through and removed all of them. Sometimes less code is better code.

With that being said, the main thing I did to make it more responsive was split the two main-con sections into their own respective divs. Doing this will give you more styling possibilities and ease of manipulation on certain parts of your markup. So with both sections in their own div, remove the float so you can flex the parent and make width 100%. After that, make the two children width: 50%; so it fulls the entire screen. Finally, you can declare a height on your parent element.

Once you have adjusted the responsiveness of main-con, you can simply fix the footer by using position: relative; instead of fixed.

Edit ~ you should add your height and width to the html as well as the body.

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.nav {
  background-color: orangered;
  margin: 0px;
  padding: 20px;
  text-align: center;
}

.nav a {
  text-decoration: none;
  color: white;
  font-size: 140%;
  margin: 15px;
}

.nav a:hover {
  background-color: rgb(69, 69, 69, 0.3);
  padding: 10px;
  border-radius: 5px;
  transition: 0.4s;
}

* {
  box-sizing: border-box;
}

.main-con {
  border: solid;
  width: 100%;
  height: 100%;
  background-color: crimson;
  display: flex;
}

.main-con>div {
  width: 50%;
  padding: 0 20px;
}

.sid-bar {
  border: dotted;
  background-color: burlywood;
  width: 50%;
  padding: 15px;
  margin-top: 0px;
  text-align: center;
  height: 100%;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  box-sizing: border-box;
  text-decoration: none;
}

footer {
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  background: #111;
}

footer .content {
  max-width: 1350px;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer .content p,
a {
  color: #fff;
}

footer .content .box {
  width: 33%;
  transition: all 0.4s ease;
}

footer .content .topic {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

footer .content p {
  text-align: justify;
}

footer .content .lower .topic {
  margin: 24px 0 5px 0;
}

footer .content .lower i {
  padding-right: 16px;
}

footer .content .middle {
  padding-left: 80px;
}

footer .content .middle a {
  line-height: 32px;
}

footer .content input[type="text"] {
  height: 45px;
  width: 100%;
  outline: none;
  color: #d9d9d9;
  background: #000;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 17px;
  border: 2px solid #222222;
}

footer .content input[type="submit"] {
  height: 42px;
  width: 100%;
  font-size: 18px;
  color: #d9d9d9;
  background: #eb2f06;
  outline: none;
  border-radius: 5px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 12px;
  border: 2px solid #eb2f06;
  transition: all 0.3s ease-in-out;
}

.content input[type="submit"]:hover {
  background: none;
  color: #eb2f06;
}

footer .bottom {
  width: 100%;
  text-align: right;
  color: #d9d9d9;
  padding: 0 40px 5px 0;
}

footer .bottom a {
  color: #eb2f06;
}

footer a {
  transition: all 0.3s ease;
}

footer a:hover {
  color: #eb2f06;
}

img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="icon" href="img/logo.png">
  <title>The Random Stuff Blog - A Blog That Is About - Ramdom Topics - Free For All</title>
</head>

<body>
  <nav >
    <a href="index.html" title="Home">Home</a>
    <a href="articles.html" title="Articles">Articles</a>
    <a href="about.html" title="About">About</a>
    <a href="contact.html" title="Contact">Contact</a>
  </nav>

  <div  title="Main Content">
    <div>
      <h2>Lorum Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    <div  title="Side Bar">
      <h2>About</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </div>
  </div>



  <footer>
    <div >
      <div >
        <div >
          <div >About us</div>
          <p>The Random stuff blog is all about intresting random stuff that you might need, we post once a week and is constently being updated.</p>
        </div>
        <div >
          <div >Contact us</div>
          <div >
            <a href="#"><i ></i>###-###-####</a>
          </div>
          <div >
            <a href="#"><i ></i>[email protected]</a>
          </div>
        </div>
      </div>
      <div >
        <div >Our Articles</div>
        <div><a href="#">Coding</a></div>
        <div><a href="#">Life</a></div>
        <div><a href="#">Crafts</a></div>
        <div><a href="#">Facts</a></div>
        <div><a href="#">Education and Laarning</a></div>
        <div><a href="#">More!</a></div>
      </div>
    </div>
    <div >
      <p>Copyright © 2022 <a href="index.html">The Random stuff blog</a> All rights reserved</p>
    </div>
  </footer>

</body>

</html>

CodePudding user response：

Don't fix the footer as in position. Here is the codepen that I made for you. thankyou for the question.

https://codepen.io/ash_000001/pen/OJOQLGV?editors=1100

body {
  margin: 0px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  height: 100%;
  width: 100%;
}

.nav {
  background-color: orangered;
  margin: 0px;
  padding: 20px;
  text-align: center;
}

.nav a {
  text-decoration: none;
  color: white;
  font-size: 140%;
  margin: 15px;
}

.nav a:hover {
  background-color: rgb(69, 69, 69, 0.3);
  padding: 10px;
  border-radius: 5px;
  transition: 0.4s;
}

* {
  box-sizing: border-box;
}
.parent{
  
}
.main-con {
  border: solid;
  float: left;
  width: 60%;
  padding: 0 20px;
  
  background-color: crimson;
  height: 100%;
  min-height: 10px;
  max-height 100px;
}

.sid-bar {
  border: dotted;
  background-color: burlywood;
  float: left;
  width: 40%;
  padding: 15px;
  margin-top: 0px;
  text-align: center;
  height: auto;
  
  min-height: 50px;
  max-height: 520px;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .main-con,
  .sid-bar {
    width: 100%;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  box-sizing: border-box;
  text-decoration: none;
  
}

footer {
  width: 100%;
  max-height: 950px;
  min-height; 250px;
  height: auto;
  background: #111;
}

footer .content {
  max-width: 1350px;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer .content p,
a {
  color: #fff;
}

footer .content .box {
  max-width: 33%;
  width:100%;
  transition: all 0.4s ease;
}

footer .content .topic {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

footer .content p {
  text-align: justify;
}

footer .content .lower .topic {
  margin: 24px 0 5px 0;
}

footer .content .lower i {
  padding-right: 16px;
}

footer .content .middle {
  padding-left: 80px;
}

footer .content .middle a {
  line-height: 32px;
}

footer .content input[type="text"] {
  height: 45px;
  width: 100%;
  outline: none;
  color: #d9d9d9;
  background: #000;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 17px;
  border: 2px solid #222222;
}

footer .content input[type="submit"] {
  height: 42px;
  width: 100%;
  font-size: 18px;
  color: #d9d9d9;
  background: #eb2f06;
  outline: none;
  border-radius: 5px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 12px;
  border: 2px solid #eb2f06;
  transition: all 0.3s ease-in-out;
}

.content input[type="submit"]:hover {
  background: none;
  color: #eb2f06;
}

footer .bottom {
  width: 100%;
  text-align: right;
  color: #d9d9d9;
  padding: 0 40px 5px 0;
}

footer .bottom a {
  color: #eb2f06;
}

footer a {
  transition: all 0.3s ease;
}

footer a:hover {
  color: #eb2f06;
}

@media (max-width:1100px) {
  footer .content .middle {
    padding-left: 50px;
  }
  
}

@media (max-width:950px) {
  footer .content .box {
    width: 50%;
  }
  
  .content {
    margin-top: 40px;
    
  }
}

@media (min-width:560px) {
  footer {
    position:fixed;
    bottom: 0px;
    
    
  }

@media (max-width:560px) {
  footer {
    
    
  }
  footer .content .box {
    width: 100%;
    margin-top: 30px;
  }
  footer .content .middle {
    padding-left: 0;
  }
}

img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="icon" href="img/logo.png">
  <title>The Random Stuff Blog - A Blog That Is About - Ramdom Topics - Free For All</title>
</head>

<body>
  <nav >
    <a href="index.html" title="Home">Home</a>
    <a href="articles.html" title="Articles">Articles</a>
    <a href="about.html" title="About">About</a>
    <a href="contact.html" title="Contact">Contact</a>
  </nav>
<div >
  <div  title="Main Content">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div  title="Side Bar">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
</div>
  <footer>
    <div >
      <div >
        <div >
          <div >About us</div>
          <p>The Random stuff blog is all about intresting random stuff that you might need, we post once a week and is constently being updated.</p>
        </div>
        <div >
          <div >Contact us</div>
          <div >
            <a href="#"><i ></i>###-###-####</a>
          </div>
          <div >
            <a href="#"><i ></i>[email protected]</a>
          </div>
        </div>
      </div>
      <div >
        <div >Our Articles</div>
        <div><a href="#">Coding</a></div>
        <div><a href="#">Life</a></div>
        <div><a href="#">Crafts</a></div>
        <div><a href="#">Facts</a></div>
        <div><a href="#">Education and Laarning</a></div>
        <div><a href="#">More!</a></div>
      </div>
    </div>
    <div >
      <p>Copyright © 2022 <a href="index.html">The Random stuff blog</a> All rights reserved</p>
    </div>
  </footer>

</body>

</html>