Vindex Vindex - 6 months ago 9
HTML Question

How to make a proper footer so that when the webpage is zoomed in, the elements will go accordingly

I am making a footer for our project. How do I make it so that when I zoom in the webpage, the "Follow us on Facebook" will go on top of the footer info? I am sorry for some mistakes that you may find in my code. Suggestions and corrections will greatly appreciated.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Pamana Beach Resort </title>
<link rel="icon" type="image/png" href="icon.png">
<style>
div#fixedfooter {
position:fixed;
bottom:0px;
left: 0px;
width:100%;
height: 70px;
background:#00ADEF;
}
#footer-info {
background-color: #00adef;
width: 50%;
margin-left: 50px;
margin-top: 10px;
float: left;
}

#footer-infotext {
color: #FFFFFF;
font-family: footer-info;
font-size: 90%;

text-align: center;
float: left;
}
#social {
margin-top: 10px;
margin-right: 30px;
background-color: #00adef;
float: right;
widht: 400px;

}
#sociallogo {
width: 50px;
height: 50px;
}
#socialtext {
float:left;
font-family: footer-info;
padding-right: 10px;
color: #FFFFFF;
}


@font-face {
font-family: footer-info;
src: url(GOTHIC.ttf);
}
@font-face {
font-family: footer-infoBold;
src: url(GOTHICB.ttf);
}

#bold-info {
font-family: footer-infoBold;
font-size: 100%;
}

</style>
</head>

<footer>
<div id="fixedfooter" >
<div id="footer-info">
<p id="footer-infotext">Designed by <span id="bold-info">CMSC 2 Students | Pamana Beach Resort </span> © Copyright 2016, All Rights Reserved.</p>
</div>
<div id="social">
<p id="socialtext">FOLLOW US ON FACEBOOK</p>
<img id="sociallogo" src="social.png">
</body>
</html>

Answer

Major points:

  • Close your tags! You didn’t close your footer and some div-elements.
  • Put the “social”-div first, so it gets on top when the view gets smaller.
  • From the id “fixedfooter” delete the “height” attribute. Otherwise, the footer will not be big enough to show all the info on small screens.
  • Use @media to change your code according to the screen-size.

Please look at the code snippet below to see all the changes. I hope it helps.

* {} #fixedfooter {
  position: fixed;
  bottom: 0px;
  background: #00ADEF;
  text-align: center;
}
#footer-info {
  background-color: #00adef;
  width: 30%;
  margin-top: 10px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#footer-infotext {
  color: #FFFFFF;
  font-family: footer-info;
  font-size: 90%;
  text-align: center;
  float: left;
}
#social {
  margin-top: 10px;
  background-color: #00adef;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
#sociallogo {
  width: 50px;
  height: 50px;
}
#socialtext {
  float: left;
  font-family: footer-info;
  padding-right: 10px;
  color: #FFFFFF;
}
@font-face {
  font-family: footer-info;
  src: url(GOTHIC.ttf);
}
@font-face {
  font-family: footer-infoBold;
  src: url(GOTHICB.ttf);
}
#bold-info {
  font-family: footer-infoBold;
  font-size: 100%;
}
@media(min-width: 768px) {
  #footer-info {
    width: 40%;
    margin-left: 50px;
  }
  #social {
    float: right;
    margin-right: 30px;
    margin-left: 50px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Pamana Beach Resort</title>
  <link rel="icon" type="image/png" href="icon.png">
</head>

<body>

  <footer>
    <div id="fixedfooter">
      <div id="social">
        <p id="socialtext">FOLLOW US ON FACEBOOK</p>
      </div>
      <div id="footer-info">
        <p id="footer-infotext">Designed by <span id="bold-info">CMSC 2 Students | Pamana Beach Resort </span> © Copyright 2016, All Rights Reserved.</p>
      </div>
    </div>
  </footer>
</body>

</html>