'Footer At The Bottom Of The Page Disappears On The Mobile Screen When The Phone Is Used In Landscape

Below is the code that I'm using to create the opening page for my website. The page works as it should when testing it on a computer and also works as it should when testing it in portrait (not turning it to the side) on my iPhone. I've noticed that the footer (the line at the bottom of the page) and the site name with a © next to it disappear when I tilt my iPhone to the side and try to view it in landscape.

If somebody could teach me how to keep the footer visible when viewing the page in landscape it'd be much appreciated.

<!DOCTYPE html>
<html>
    
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">   
    
<body style="background-color: white; font-family: sans-serif;">

<title>MORIKOBOSHI Official Website</title>
    
<div class="image">
<img src="Home_Page_Photo.jpg" alt="Home_Page_Photo.jpg" width="90%">
</div>

<div class="words">
<p style="text-align: center; font-size: 35px; font-family: sans-serif; overflow: hidden; color: black;"><a href="Menu/Website_Home_Page.html" style="text-decoration:none; color: black; text-shadow:1px 1px 0 #FFFFFF,-1px 1px 0 #FFFFFF,1px -1px 0 #FFFFFF,-1px -1px 0 #FFFFFF;"><b>日本語 </b></a> |  <a href="Menu/Website_Home_Page_English.html" style="text-decoration:none; color: black; text-shadow:1px 1px 0 #FFFFFF,-1px 1px 0 #FFFFFF,1px -1px 0 #FFFFFF,-1px -1px 0 #FFFFFF;"><b>English</b></a></p>   
</div>
 
<footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI©</footer>    
 
<style>
    
.image{text-align: center;}

    
p {          
  color: white;
  text-decoration:none; color: white; text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
  font-size: 400%;
  margin: 50px;
  position: relative;
  z-index: 3;}
    
@media (max-width: 1130px)and (min-width: 280px) {
 .responsive-image-container{
        display: flex;
        flex-direction: column;
        text-align: center;
      }
    
    img{width:100%;
        margin-top: 20px;}
    
    .site-footer{position: absolute;
                 bottom: 0;
                 width: calc(100% - 2em);}
    }
    
    
.footer{width: 100%; 
        height: 40px; 
        text-align: center;
        border-top: .5px solid black; 
        position: absolute;
        bottom: 0px;
        padding: 10px;}
    
  
 .page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -40px; 
}

 .page-wrap:after {
  content: "";
  display: block; 
  }

 .site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 20px; 
}

 .site-footer {
  text-align: center;
  border-top: .5px solid black;
  padding: 7px;
}
     
</style>    
    
</body>
</html>
mobilelinefooterlandscape


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions