S. Miller S. Miller - 1 month ago 9
CSS Question

Why won't my footer readjust to smaller screen sizes?

I have the webpage that I am working on. Everything about it works out properly in terms of responsiveness, however, only the footer doesn't work properly. I would like for the 3 sections of the footer to be displayed underneath each other when the screen is made smaller. Any help here is greatly appreciated. Check out my code below:

HTML:

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Papia</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--- This is the path to the image that will display on mobile --->
<video poster="assets/backupimage.jpg" id="bgvid" playsinline autoplay muted loop>
<!--- Inlcude the video files with .webm file first --->
<source src="assets/papia.webm">
<source src="assets/papia.mp4">
<source src="assets/papia.mov">
</video>
<div id="topLeft">
<img src="assets/papia-logo-secondary.svg">
</div>
<div id="topRight">
<a href="http://www.google.com" target="_blank">Find a table</a>
</div>
<div id="logo">
<img src="assets/papia-logo-main.svg">
</div>
<div id="left">
<p>4:30pm - close (kitchen closes at 11pm)</p>
</div>
<div id="centre">
<a href="" target="_blank">Facebook</a>
<a href="" target="_blank">Instagram</a>
<a href="" target="_blank">Twitter</a>
</div>
<div id="right">
<p>64 Welfare Road, Cole Bay, Sint Maarten</p>
</div>
<!---
This is an option button that will pause the video background
<div>
<button>Pause</button>
</div>
--->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>


CSS:

#left{
position: absolute;
float: left;
bottom: 0;
left: 20px;
color: white;
}
#centre{
position: absolute;
float: left;
margin-left: 40%;
bottom: 10px;
clear: inherit;
min-width: 300px;
}
#right{
position: absolute;
float: left;
margin-left: 78%;
bottom: 0;
color: white;
}

@media screen and (max-width: 500px) {
div{display: block}
}
@media screen and (max-device-width: 800px) {
html { background: url(assets/backupimage.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
div{display: block}
}

Answer

I agree with hungerstar's comment - absolute positioning will make it needlessly difficult to make your webpage responsive. That being said, it can be done. You're already using @media screen and (max-width: 500px) syntax in your CSS but not using it to the full extent of its capabilities. Inside of the section marked for the max-width: 500px section, you have the opportunity to totally redefine your css for a browser window smaller than 500px. Inside those brackets, you can just redefine the CSS for your 3 divs.

@media screen and (max-width: 500px){
 #left{
  position: absolute;
  float: left;
  bottom: 200px;
  left: 20px;
  color: white;
}
#centre{
  position: absolute;
   left: 20px;
  float: left;
  bottom: 100px;
  clear: inherit;
  min-width: 300px;
 }
#right{
  position: absolute;
  float: left;
  left: 20px;
  bottom: 0;
  color: white;
}
}

So this will check the width of your screen, and when it becomes smaller than 500px, this CSS will be applied and your 3 divs will be repositioned all the way to the left, stacked on top of each other (i made up positions for them arbitrarily (100 and 200 px from the bottom). You will need to redefine all this for the 800px-sized screen as well