1

Hello everyone I am pretty new to HTML and CSS is there any way for me to make the background of this footer be over the whole footer and not that one bit. I tried a few things but is will over lap the contact forum for a small part but it is pretty annoying that I cant find out how to solve this problem
Picture of the page

.footer,
.push {
  height: 50px;
}

.footer {
  background: #000f14 !important;
  padding: 20px !important;
  text-align: center !important;
  position: absolute !important;
  bottom: 0 !important;
  margin-top: 50px;
  width: 100% !important;
}

.column {
  display: inline-block;
  width: 25%;
  vertical-align: top;
  text-align: left;
  margin: 0 2.5%;
  margin-top: 15px;
  background: #000f14;
}

.column h3 {
  margin-top: 0;
  margin-bottom: 10px;
  background: #000f14;
  font-size: 25px;
}

.column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #000f14;
}

.column ul li {
  padding: 5px 0;
  background: #000f14;
  font-size: 15px;
}

.column p {
  margin: 0;
  background: #000f14;
  font-size: 15px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
  <div class="footer-placeholder">
    <div class="footer">
      <div class="column">
        <h3>Contact Information</h3>
        <ul>
          <li>1234 Example Street</li>
          <li>Example City, XX 12345</li>
          <li>Phone: (555) 555-5555</li>
          <li>Email: info@example.com</li>
        </ul>
      </div>
      <div class="column">
        <h3>Services</h3>
        <ul>
          <li>Web Design</li>
          <li>Graphic Design</li>
          <li>Marketing</li>
          <li>SEO</li>
        </ul>
      </div>
      <div class="column">
        <h3>Trademark</h3>
        <p>&copy; 2023 AquaTech. All rights reserved.</p>
      </div>
    </div>
  </div>
</body>

</html>
Sfili_81
  • 2,377
  • 8
  • 27
  • 36
Dani L.
  • 25
  • 6
  • You set to your footer an height of 50px... your content is bigger then `50px`......set `height:auto` to your footer – Sfili_81 Feb 17 '23 at 09:02

3 Answers3

2

You need to add the height in the class .footer { height: auto } And to make the content of footer visible add color in the class .column{color: white}

The final look of your both CSS classes will be as below;

.footer { background: #000f14 !important; padding: 20px !important; text-align: center !important; position: absolute !important; bottom: 0 !important; margin-top: 50px; width: 100% !important;height:auto; }

.column { display: inline-block; width: 25%; vertical-align: top; text-align: left; margin: 0 2.5%; margin-top: 15px; background: #000f14; color:white;}

Besides, you can also have a look at the link below to see the solution visually: TestWise Replay| fixed the footer height

Maria
  • 29
  • 3
0
.footer,
.push {
  height: 100%;
}

With this basically you tell your element with footer class that take the full height of its child elements.

RaZzLe
  • 1,984
  • 3
  • 13
  • 24
0

Simply add height: auto; to the .footer CSS selector.

Improvements suggestions:

vsync
  • 118,978
  • 58
  • 307
  • 400