Foundation framework enables the creation of a full width footer that stands out

I'm having trouble getting my footer panel to stretch across the entire page, it seems stuck in the center. The header at the top of the page spans the full width just fine. Am I missing something? My goal is to make both panels at the bottom of the page span the full width.

HTML

<body>
  <header>
    <div class="large-12">
      <div class="panel">
        <h1 class="nowrap text-center">Header</h1>
      </div>
    </div>
    <br><br>
  </header>

  <div class="large-4 columns">
    <div class="panel">

      <h3>Sidebar</h3>

      <h5>lorem</h5>
        <ul class="text-left ">
          <!-- # used as placeholder -->
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
          <li><a href="#">link 4</a></li>
          <li><a href="#">link 5</a></li>
        </ul>

      </div>
    </div>

  <div class="large-8 columns">
    <div class="panel">
      <h1>Call To Action</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quas quasi perspiciatis unde cumque nesciunt nisi eveniet natus nemo quia, sequi non, ab, beatae aliquam. Dolore accusamus quos esse similique architecto, aut consequatur ratione placeat, veritatis ea sit tempore corporis cupiditate voluptas? Nesciunt rem vel corporis consectetur perferendis hic perspiciatis amet totam quod, impedit reiciendis suscipit aperiam, eum ex dolorem fugit repellendus sit. Non, facere labore, veritatis nobis corporis sapiente dignissimos dolore...
    </div>

    <div class="row">
      <div class="columns large-6">
        <p class="panel columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum tempora, ipsam. Quos, hic reprehenderit perferendis ut illo minus. Quae odit laborum excepturi inventore consequuntur deserunt rerum dolorum optio, sit. Maiores.</p>
      </div>

      <div class="columns large-6">
        <p class="panel columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio possimus unde labore delectus quia asperiores adipisci magni molestias libero in et modi assumenda nesciunt sapiente, error, necessitatibus, sed accusantium itaque.</p>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        <div class="panel">
          <h1>Website in no time</h1>
        </div>

       <footer>
         <div class="large-12">
           <div class="panel">
             <h1 class="nowrap text-center">Footer</h1>
           </div>
         </div>
       </footer>
htmlcsszurb-foundation

Answer №1

The issue lies in the placement of your footer within a row, which limits it to the maximum width set by Foundation, usually around 960px. To resolve this when using Foundation, consider making the footer element 100% width and then enclosing the content within a row.

CSS

footer {
  width: 100%;
  margin: 0;
  padding: 0; 
}

HTML

<header>
  <!-- header content-->
</header>

<div>
  <!-- wrap your content as needed -->
</div>

<!-- ensure that the footer is not enclosed within a row for full page width -->
<footer>
  <div class="large-12">
    <div class="panel">
      <h1 class="nowrap text-center">Footer</h1>
    </div>
  </div>
</footer>

Answer №2

The CSS for the foundation includes:

.row {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 62.5rem;
}

One suggestion is to try:

footer.row {
  max-width: none; 
}

I hope this solution works for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: You can't call .text as a function in jQuery

While trying to retrieve the text from my td, I encountered the following error: $tds[2].text is not a function. The output of console.log('td',$tds[2]) shows: https://i.stack.imgur.com/OUngP.png $(document).ready(function() { $trs = $(&ap ...

javascriptjqueryhtml

Strategies for eliminating all elements with a particular innerHTML content

function removeElements() { let li = document.getElementsByClassName("li"); for (var i = 0; i < li.length; i++) { if (li[i].innerHTML === "hello") { li[i].parentElement.remove(); } } } <li> <span class="li">hi</sp ...

javascripthtmljquery

Styling <CardHeader> component with React and Material UI CSS

Incorporating React and Material UI, my goal is to arrange 3 divs within a <Card> <CardHeader/>, positioning them with left, center, and right alignment as illustrated below. The modification required is minor - I simply need to eliminate the ...

cssreactjsmaterial-ui

Label positioning for checkboxes

Is there a way to display the checkbox label before the actual checkbox without using the "for" attribute in the label tag? I need to maintain the specific combination of the checkbox and label elements and cannot use nested labels or place other HTML elem ...

javascripthtmlcsscheckbox

Issue with Bootstrap 4 list items not displaying in block format

Based on the information from , using li tags as block elements should result in a vertical menu. However, with Bootstrap 4, when I use li tags, the menu stays horizontal on toggle for small devices. Is this the expected behavior? <ul class="nav navb ...

htmltwitter-bootstrapcsstwitter-bootstrap-4bootstrap-4

Loading logos dynamically using Jquery upon selection of an option

In the form I created, there is a dropdown logo selection at the bottom. The options in the dropdown are populated from folders in the root directory using the following code: $dirs = glob('*', GLOB_ONLYDIR); Each of these directories contain ...

jqueryhtmlimageperformance

Pass along computed style data to the parent component in Vue.js

I am relatively new to VueJS and currently in the process of exploring its features. One specific issue I am facing on my website involves a TopBar component that includes both the logo and the menu. <template> <div id="topBar"> <div ...

javascripthtmlvue.jseventemitter

Having trouble with playing the appended HTML5 Video?

Having trouble getting a video player to display after clicking a button. This is the code I use to add the video player in index.html: $("#videoContainer").append( "<video id=\"video-player\" width=\"100%\" height ...

javascripthtmlvideo

Update the navigation logo while scrolling

My website has a scrolling navigation menu using Wordpress. The default logo color is green, but when the user scrolls, a white background appears. However, on specific screens, I need the initial logo to be white. I have managed to create an alternate na ...

javascriptphphtmlcsswordpress

Activate radio button exclusively for admin user

My current application includes an admin panel with functions to manage users. I use a while loop in the form creation to display 3 user types: Admin, Manager, and User, which are pulled from a database. Admin Manager User This is how my HTML Form look ...

javascriptphpjqueryhtmlajax

Issue with justify-content in Bootstrap 5 still unresolved

Currently working with Bootstrap 5 and have set up 4 cards. My goal is to position the second card on the left side. I've applied the class justify-content-xl-start to the card, however, it doesn't seem to be functioning as expected. I also attem ...

htmlcsstwitter-bootstrapbootstrap-5

Struggles with arranging HTML header components

I've been attempting to insert a Twitter logo into the header of my website (which is styled using Bootstrap CSS), but unfortunately, it's causing some alignment issues. My initial goal was to position them next to each other, however, they ended ...

csshtmltwitter-bootstrapalignment

My ng-view html is unexpectedly displaying as plain string. What steps should I take to resolve this issue?

Why is my ng-view HTML displaying as plain text? How can I resolve this issue? I have encountered an error, here is the screenshot for reference: Unfortunately, I am unable to upload images at the moment. ...

javascripthtmlangularjshaml

I am currently attempting to design a blurred background with text overlay, where the text seems to clear up the blur effect of the background. However, I am facing

Goal: I want to achieve a visually appealing effect by overlaying text on a blurred background image, making it appear as though the text is transparent and revealing the clear background image behind it. Status: I have successfully created a layout with ...

htmlcss

Exploring Array Iteration and Incrementing with Easing Techniques

I am currently working on a function that involves iterating over an array and incrementing the values by varying amounts. The challenge is to decrease these incremental amounts as the values in the array get larger. Let's consider the following exam ...

javascriptjquerycssarrayseasing

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

javascripthtmlcssdom

Determine with jQuery whether the img src attribute is null

My HTML structure is as follows: <div class="previewWrapper" id="thumbPreview3"> <div class="previewContainer"> <img src="" class="photoPreview" data-width="" data-height=""><span>3</span> </div> </div> ...

javascriptjqueryhtmlimage

Tips for extracting particular information from a website and displaying it within my application

While I have searched for a solution to my problem, I couldn't find an answer that fits my specific needs. I am attempting to extract specific information (highlighted in red) from this website: . I understand that JSON parsing can retrieve this data, ...

androidhtmljsonparsingweb-scraping

Hiding Div with JavaScript (Quick and Easy)

Hey there, I'm looking to make regStart and regPage alternate visibility based on a click event. I'm still getting the hang of JavaScript so any simple answers would be appreciated. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...

javascripthtml

Steps for including an animation class in a div

Is it possible to add the sweep to top blue color animation to the red box using a set-timeout function instead of hover? I tried using the following code but it doesn't seem to be working. Can you help me troubleshoot? setTimeout(function() { $( ...

javascriptjquerycss