Question 196278 in Html Question posted in
Some basic documentation can be found here.

Html – I can't get my footer to be the full page width only on one of my pages

I’m new to coding and I can’t figure out why this one particular page doesn’t let my footer be the full page width. It’s not the css because my other pages work fine. I’m not sure what I’m doing wrong? It’s confusing to me because of my six pages this is the only one having this problem. I’m sure it’s a stupid mistake but any help would be amazing, thank you!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  <link href="styles.css" rel="stylesheet">
  <title>The Backyard</title>

  <div class="background-container"></div>
</head>
<body>
  <nav class="navbar navbar-expand-sm ">
    <a class="navbar-brand" href="#">The Backyard</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="menus.html">Menus and Specials</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="events.html">Events</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="malibu.html">Malibu Nights</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="col-sm-12 text-center">
    <div class="about">
    <h2><b>About The Backyard</b></h2>
    <p><b>
        The Backyard opened in downtown Gainesville in February 2010 as a collaboration
        between the owners of Boca Fiesta restaurant and the owners of Palomino Pool Hall.
        The shared space between both businesses proved to be the perfect spot for an outdoor
        live music venue as well as a general hangout. Over the years we have hosted an array
        of bands, artists, DJs, comedians and the like. We also hold regular dance parties,
        karaoke, trivia nights, movie nights and more. The Backyard is also available to rent
        on occasion for any event you may be planning. If you are in need of a venue for an
        event, please visit our contact page!</b></p>
    </div>
  </div>

            <div class="container mt-5">
                <div class="row">
                  <div class="col-sm-7 text-center">
                    <div class="location text-center">
                    <h2><b>Location</b></h2>
                    <p><b>
                        The Backyard<br>
                        at Boca Fiesta and Palomino<br>
                        232 1.2 SE 1st St.<br>
                        Gainesville, FL 32601<br>
                        [email protected]<br>
                        <br>
                        HOURS:<br>
                        Monday: 6pm to 2am<br>
                        Tuesday to Thursday: 6pm to 11pm<br>
                        Friday and Saturday: 6pm to 2am<br>
                        Sunday: Closed<br>
                    </b></p>
                    </div>
                  </div>
                  <div class="col-sm-5">
                    <div class="aboutpic text-center">
                      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3467.425038817421!2d-82.32692062509575!3d29.649438175124857!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e8a38d39066479%3A0x9caba018de265ca2!2sThe%20Backyard%20at%20Boca%20Fiesta%20%26%20Palomino!5e0!3m2!1sen!2sus!4v1686269716933!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                    </div>

                  <div class="col-sm-12">
                        <div class="accordion-body">
                        <div class="accordion">
                          <h1>Frequently Asked Questions</h1>
                          <hr>
                          <div class="container">
                            <div class="label">Is The Backyard part of Boca Fiesta or Palomino?</div>
                            <div class="content">The Backyard may be connected to Boca Fiesta and Palomino but we are our own, separate business! We do however serve Boca Fiesta's menu and you may bring drinks in and out of all 3 bars!</div>
                          </div>
                          <hr>
                          <div class="container">
                            <div class="label">Is The Backyard wheelchair accessible?</div>
                            <div class="content">YEP! All 3 bars in our complex are completely wheelchair accessible!</div>
                          </div>
                          <hr>
                          <div class="container">
                            <div class="label">What are the age restrictions at The Backyard?</div>
                            <div class="content">Weekly event age restrictions:<br> Karaoke(Monday nights): 18+<br> Trivia(Tuesday and Thursday nights): All ages<br> Malibu Nights(Friday nights): 21+<br> ....obviously you have to be 21 to drink.</div>
                          </div>
                          <hr>
                          <div class="container">
                            <div class="label">Can I play,perform,book a show,hop on a show,etc. at The Backyard?</div>
                            <div class="content">Maybe!  Send us an email to [email protected] with any and all info you would like us to have and we will get back to you as soon as possible.</div>
                          </div>
                        </div>
                    </div>




<footer class="footer">
    <div class="footer">
      <p class="left">The Backyard<br>
        at Boca Fiesta and Palomino<br>
        232 1.2 SE 1st st.<br>
        Gainesville, FL 32601</p>
      <p class="right">
      <ul class="social-icons">
        <li>
          <a href="https://www.facebook.com/BackyardGNV/" target="_blank">
            <img src="facebook.png" alt="Facebook"/>
          </a>
        </li>
        <li>
          <a href="https://www.instagram.com/backyardgnv/?hl=en" target="_blank">
            <img src="instagram.png" alt="Instagram"/>
          </a>
        </li>
      </ul>
    </p>
    </div>
  </footer>

  <script src="about.js" type="text/javascript"></script>


</body>
</html>

I’ve tried changing the placement of the

Tags:

2

Answers


  1. 0

    Based on the provided code, it seems that you have nested the footer element within another div with the class "footer." This might be causing the issue with the footer not extending the full width of the page.

    To fix the problem, you can try the following steps:

    1. Remove the redundant div with the class "footer" that wraps the footer content.

    Before:

    <footer class="footer">
    <div class="footer">
        <!-- Footer content -->
    </div>
</footer>

    After:

    <footer class="footer">
    <!-- Footer content -->
</footer>
    1. If the footer is still not taking up the full width, ensure that you have appropriate CSS rules in your styles.css file to make the footer span the entire page width. You can use the width: 100%; property to achieve this.

    For example, in your styles.css file, add the following rule:

    .footer {
  width: 100%;
}

    Make sure that the styles.css file is correctly referenced in your HTML file.

    After making these changes, the footer should extend the full width of the page. If the issue persists, please provide the CSS code from your styles.css file, as there might be other factors affecting the footer’s width.

    Login or Signup to reply.
  2. 0

    I have tested the code and discovered that 3 div’s aren’t closed.

    <div class="col-sm-12">
<div class="row">
<div class="container mt-5">

    When the browser executes the code it adds the 3 closing div tags and it nests everything else inside this elements so when you try to apply the 100% width it will be the total width of those elements and not of the page.

    To solve this, after you close the div’s you could remove the elements wrapping footer and it should work.

    If you don’t want to do this, you also could assign an absolute position:

    .footer {
    position: absolute;
    left: 0;
    width: 100%;
}

    More information about the position attribute:
    https://developer.mozilla.org/en-US/docs/Web/CSS/position

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search