Reputation: 41

Footer background-color is taking over my entire web page

Help! My footer background-color is taking over my entire web page. This was supposed to be a blue backgrounded footer on a white page. When I take mention of the footer from my css the page looks correct, but my footer is lost. Help? I've tried everything! Here is the jsfiddle: https://jsfiddle.net/3eoxaqjt/1/ I thank you much for any help that you can give me!

html:

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/responsive.css" />
    <link rel="stylesheet" type="text/css" media="print" href="css/print.css">
  </head>

  <body>

    <div>
      <header>
        <h1>Project 2</h1>
      </header>
    </div>

    <section>
      <div class="row col-m-3 col-3">
        <p id="firstLine">About This Project</p>
        <p id="secondLine">Unit Topics Covered</p>
        <p id="thirdLine">References</p>
        <p id="fourthLine">Tips</p>
      </div>

      <div class="col-m-9 col-9">
        <h2>About This Project</h2>
        <p>This project is about responsive design. Resize the browser window (Viewport) to see how the content respond to the resizing.</p>
        <img src="images/responsive.png" alt="responsive images">
      </div>


      <div class="col-m-4 col-3">
        <h2>Unit Topics Covered</h2>
        <ul>
          <li>HTML &amp; CSS refresh</li>
          <li>Browser to Debug</li>
          <li>Responsive Design Media CSS</li>
          <li>Responsive Design Mobile</li>
          <li>Responsive Design Desktop &amp; Tablet Hiding/Show</li>
        </ul>
      </div>

      <div class=" references col-m-8 col-3">
        <h2 id=referencesHeading>References</h2>
        <p><a href="http://www.w3schools.com/html/default.asp" target="_blank">W3Schools: HTML</a></p>
        <p><a href="http://www.w3schools.com/css/default.asp" target="_blank">W3Schools: CSS</a></p>
        <p><a href="https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/basics?hl=en" target="_blank">Browser: Chrome</a></p>
        <p><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector" target="_blank">Browser: Firefox</a></p>
        <p><a href="https://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx" target="_blank">Browser: IE</a></p>
        <p><a href="https://www.w3.org/TR/CSS21/media.html" target="_blank">W3Schools: Media Types</a></p>
        <p><a href="http://www.w3schools.com/cssref/css3_pr_mediaquery.asp" target="_blank">W3Schools: Media Queries</a></p>
        <p><a href="http://www.w3schools.com/css/css_rwd_intro.asp" target="_blank">W3Schools: CSS Responsive Design</a></p>
        <p><a href="http://www.w3schools.com/css/css_rwd_images.asp" target="_blank">W3Schools: Responsive Design Images</a></p>
        <p><a href="http://www.w3schools.com/w3css/w3css_responsive.asp" target="_blank">W3Schools: CSS3 Responsive</a></p>
      </div>

      <div class="col-m-12 col-6">
        <h2>Tips</h2>
        <ul>
          <li><span>Go Mobile First -</span> Approximately 1 in every 7 people on earth use their mobile devices to access the internet</li>
          <li><span>Get Acquainted with Media Queries -</span> Media queries check for a device’s resolution, height, width and orientation</li>
          <li><span>Understand What Mobile Means for Your Users -</span> Use analytics to figure out why a user is visiting your website on their phone</li>
          <li><span>Use Percentages -</span> Instead of designing breakpoints for every possible viewport, you set a maximum layout size</li>
          <li><span>The Need for Speed -</span> Smartphone users expect a site to load in under 4 seconds. Main reason behind a slow site are non-optimized images</li>
          <li><span>Eliminate the Unnecessary -</span> Get rid of excessive elements, not only for your user experience, but also for website’s speed</li>
          <li><span>To Hamburger or Not to Hamburger -</span> Keep less popular links in the hamburger menu navigation</li>
          <li><span>Make it Readable -</span> Don’t make your users squint to read or pinch-to-zoom. Make your text size large enough to read from a smaller screen</li>
          <li><span>Use the Right Button Size -</span> Avoid small button sizes. Padding increases the tappable area, but margins do not</li>
          <li><span>Design for Screen Orientation -</span> Landscape orientation wins over portrait orientation 59% to 41%</li>
        </ul>
      </div>

    </section>

<div class="footer">
    <p>
       <p>Time and Date</p>
    </p>
</div>

</body>
</html>

css:

* {
  box-sizing: border-box;
}

header,
footer,
nav,
section,
article,
aside {
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  width: 100%
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

body {
  font-size: 14px;
  font-family: "Lucinda" Sans sans-serif;
}

@media screen and (min-width: 600px)and (max-width: 768px) {
  .col-m-1 {
    width: 8.33%;
  }
  .col-m-2 {
    width: 16.66%
  }
  .col-m-3 {
    width: 25%
  }
  .col-m-4 {
    width: 40%
  }
  .col-m-5 {
    width: 41.66%
  }
  .col-m-6 {
    width: 50%
  }
  .col-m-7 {
    width: 58.33%
  }
  .col-m-8 {
    width: 60%
  }
  .col-m-9 {
    width: 75%
  }
  .col-m-10 {
    width: 83.33%
  }
  .col-m-11 {
    width: 91.66%
  }
  .col-m-12 {
    width: 100%
  }
}

@media screen and (min-width: 768px) {
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%
  }
  .col-3 {
    width: 25%
  }
  .col-4 {
    width: 33.33%
  }
  .col-5 {
    width: 40%
  }
  .col-6 {
    width: 50%
  }
  .col-7 {
    width: 58.33%
  }
  .col-8 {
    width: 60%
  }
  .col-9 {
    width: 75%
  }
  .col-10 {
    width: 83.33%
  }
  .col-11 {
    width: 91.66%
  }
  .col-12 {
    width: 100%
  }
}

h1 {
  background-color: #9933cc;
  color: white;
  padding: 15px;
  list-style: none;
}

#firstLine {
  background-color: #33b5e5;
  font: white;
  box-shadow: 1px 1px 1px #888888;
  padding: 8px;
}

#firstLine:hover {
  background-color: #0099cc;
}

#secondLine {
  background-color: #33b5e5;
  font: white;
  box-shadow: 1px 1px 1px #888888;
  padding: 8px;
}

#secondLine:hover {
  background-color: #0099cc;
}

#thirdLine {
  background-color: #33b5e5;
  font: white;
  box-shadow: 1px 1px 1px #888888;
  padding: 8px;
}

#thirdLine:hover {
  background-color: #0099cc;
}

#fourthLine {
  background-color: #33b5e5;
  font: white;
  box-shadow: 1px 1px 1px #888888;
  padding: 8px;
}

#fourthLine:hover {
  background-color: #0099cc;
}

img {
  max-width: 100%;
  height: auto;
}

#referencesHeading {
  color: white;
}

.references {
  text-align: left;
  font: 14px;
  box-shadow: 1px 1px 1px #888888;
  padding: 10px;
  background-color: #33b5e5;
}

a:link {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

span {
  color: orange;
}

.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 10px;
    padding: 15px;
}

Upvotes: 2

Answers (4)

NPN

Reputation: 227

@Andi is correct! You should have a and inside this row the responsive columns need to be coded. Your grid system has to define for full with , how many columns and base on that you need to apply the different col-m-* for different elements. If this is not clear, mock the layout and share will do the sample code for layout.

Upvotes: 0

andi

Reputation: 6522

Most grid based frameworks require a column to be inside of a row. But you have columns without any rows, and so you don't get the float clearing property that's built into the rows. Wrap all of your column divs inside <div class="row"></div> and that should take care of your footer problem.

Upvotes: 1