0

When I try to minimize this page/resize it to a size smaller than my screen, espicially when it is minimized in a vertical manner (where the height of the page is longer than the width) the footer becomes blank/white and the background-image becomes shorter.

Take a look here.

<!DOCTYPE html>
<html>
    <head>
        <link href="style2.css" type="text/css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
        <script src="https://use.fontawesome.com/4c228f39e6.js"></script>
        <title>Magna Golf</title>
    </head>
    <body>
        <nav class = "top-navigator">
            <div class ="float-left"><a href="home2.html" target="_blank">Magna Golf</a></div>  
            <div class ="float-right">
                <ul>
                    <li class ="navi-links"><a href = "#">Contact Us</a></li>
                    <li class ="navi-links"><a href ="#"> Members Login</a></li>
                    <li class ="navi-links"><a href ="#">About Us</a></li>
                    <li class ="navi-links"><a href="#">Guests</a></li>
                    <li class ="navi-links"><a href="#">Adena Meadows</a></li>
                </ul>
            </div>
        </nav>


       <div class = "center-container">
                <div class ="logo"><img src ="horse.png" alt="Magna Golf Logo>" width="130px"</img>
                </div>

            <div class ="footer">
                <div class="footer-text">Check Us out on Social Media   
                </div>
                <div class="footer-social">
                    <ul>
                        <li class="social-links"><a class = "social" href="#" target="_blank">Facebook</a></li>
                        <li class="social-links"><a class = "social" href="#" target="_blank">Twitter</a></li>
                        <li class="social-links"><a class = "social" href="#" target="_blank">Instagram</a></li>        
                    </ul>
               </div>       
           </div>
        </div>
   </body>
</html>

CSS---

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{

}

a{
    color:gold;
    text-decoration: none;
}

a:hover{
    color:white;
}
.top-navigator{
    width:100%;
    height:50px;
    background-color:rgba(0,0,0,0.4);
    backgroud-color:grey;

}

.float-left{
    color:gold;
    font-family:Cinzel, serif;
    letter-spacing: 0.1em;
    word-spacing: 0.0em;
    width:160px;
    font-size:20px;

    position:relative;
    top:25%;
    margin-left:4%;
}

.float-right{
    font-family:Cinzel, serif;
    text-transform:lowercase;
    font-size:12px;
    width:530px;
    position:relative;
    margin-left:58%;
    bottom:20%;
}


.navi-links{
    display:inline;
    margin-left:25px;
}


.center-container{
    width:100%;
    height:calc(100vh - 50px); 
    background-image:url("http://magnagolf.com/images/slideshow/bgd3.jpg"); background-size:100%;
    background-repeat: no-repeat;
}

.logo{
    width:75px;
    position:relative;
    margin:0 auto;
    top:12px;
}


.footer{
    width:100%;
    position:absolute;
    height:20px;
    bottom:0; /*to get footer to sick to bottom*/


    /*
    background-color:rgba(0,0,0,0.4);
    */
}


.footer-text{
    width:300px;
    height:20px;
    text-align:center;
    font-family:Cinzel, serif;
    font-size:14px;
    color:white;

    position:relative;

    margin-Left:1%;
}

.footer-social{
    font-family:Cinzel, serif;
    font-size:13px;
    width:260px;

    position:relative;
    bottom:23px;
    margin-left:78%;
}


.social-links{
    display:inline;
    color:white;
    margin-left:15px;   
}

.social{
    color:white;
}

The background image is a url so take sometime to post the code in your editor to see what I mean.

Cheers friends,

2 Answers 2

0

Because .center-container's background isn't covering the whole div when the viewport is narrow. Your footer doesn't become blank... it's just positioned over a white background when .center-container's background image doesn't cover the bottom of that element, so the white text/links in the footer on top of a white background means you can't see the contents of the footer.

Changing the background to background-size: cover will ensure the background is applied to the whole div regardless of the shape of .center-container when you resize the window.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {}

a {
  color: gold;
  text-decoration: none;
}

a:hover {
  color: white;
}

.top-navigator {
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.4);
  backgroud-color: grey;
}

.float-left {
  color: gold;
  font-family: Cinzel, serif;
  letter-spacing: 0.1em;
  word-spacing: 0.0em;
  width: 160px;
  font-size: 20px;
  position: relative;
  top: 25%;
  margin-left: 4%;
}

.float-right {
  font-family: Cinzel, serif;
  text-transform: lowercase;
  font-size: 12px;
  width: 530px;
  position: relative;
  margin-left: 58%;
  bottom: 20%;
}

.navi-links {
  display: inline;
  margin-left: 25px;
}

.center-container {
  width: 100%;
  height: calc(100vh - 50px);
  background-image: url("http://magnagolf.com/images/slideshow/bgd3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.logo {
  width: 75px;
  position: relative;
  margin: 0 auto;
  top: 12px;
}

.footer {
  width: 100%;
  position: absolute;
  height: 20px;
  bottom: 0;
  /*to get footer to sick to bottom*/
  /*
    background-color:rgba(0,0,0,0.4);
    */
}

.footer-text {
  width: 300px;
  height: 20px;
  text-align: center;
  font-family: Cinzel, serif;
  font-size: 14px;
  color: white;
  position: relative;
  margin-Left: 1%;
}

.footer-social {
  font-family: Cinzel, serif;
  font-size: 13px;
  width: 260px;
  position: relative;
  bottom: 23px;
  margin-left: 78%;
}

.social-links {
  display: inline;
  color: white;
  margin-left: 15px;
}

.social {
  color: white;
}
<!DOCTYPE html>
<html>

<head>
  <link href="style2.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
  <script src="https://use.fontawesome.com/4c228f39e6.js"></script>
  <title>Magna Golf</title>
</head>

<body>
  <nav class="top-navigator">
    <div class="float-left"><a href="home2.html" target="_blank">Magna Golf</a></div>
    <div class="float-right">
      <ul>
        <li class="navi-links"><a href="#">Contact Us</a></li>
        <li class="navi-links"><a href="#"> Members Login</a></li>
        <li class="navi-links"><a href="#">About Us</a></li>
        <li class="navi-links"><a href="#">Guests</a></li>
        <li class="navi-links"><a href="#">Adena Meadows</a></li>
      </ul>
    </div>
  </nav>


  <div class="center-container">
    <div class="logo"><img src="horse.png" alt="Magna Golf Logo>" width="130px" </img>
    </div>

    <div class="footer">
      <div class="footer-text">Check Us out on Social Media
      </div>
      <div class="footer-social">
        <ul>
          <li class="social-links"><a class="social" href="#" target="_blank">Facebook</a></li>
          <li class="social-links"><a class="social" href="#" target="_blank">Twitter</a></li>
          <li class="social-links"><a class="social" href="#" target="_blank">Instagram</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

1
  • Michael Coker, you sir are a genius ! Thank you very much :) I will make your post the answer soon, stack say's that there's a time-limit. Commented Feb 12, 2017 at 2:11
0

Your Problem

The background image is a landscape image. Resizing the page will resize the image, but only within it's proportions (it is constrained).

When you resize to an area where the image will not cover some of the page, the footer (with white text) will appear on top of the page background (which is white), and thus the text will seem to "disappear".

Solutions

  • One way to solve this is to add the background-size:cover style to .container_center, to turn off the constraints on image resizing, and just make it fill the visible area. Note that in some situations, this will crop the image, and for people with really big monitors, it may appear stretched.

  • However, you could (and should) also make a mobile site view using media queries, and simply change the overall look of your site at that point - some of your links disappear at smaller screen widths...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.