What could be causing the extra room at the bottom of my webpage?

I've been teaching myself how to create responsive websites using Zurb's Foundation 6. I've successfully built a simple website, but I'm facing an issue with spacing at the bottom of the page.

The problematic areas are the "pagination" and "footer" sections of my page.

You can view the site at test.allvixen.com and here's a snippet of my code:

<div class="large-12 columns">
    <center>
            <nav class="pagination">
            <ul>
                ... (pagination code)
            </ul>
        </nav>
  </div>

  <div class="large-12 columns">
  <div id="footer">
        &copy; 2013 - <a href="http://allvixen.com/">allvixen.com</a>
        </div>
        </center>

        </div>

I'm struggling to reduce or eliminate the gap between the pagination and copyright notice. Additionally, there seems to be excessive space below the copyright notice.

If anyone could provide guidance on what went wrong or share resources for solving this issue, I would greatly appreciate it!

htmlcsszurb-foundation

Answer №1

The sections class is set with a minimum height of 300px. As a result, the final section element appears larger than intended.

If you do not want certain sections to have a minimum height, you can override it by adding min-height:0px;.

Here's an example:

.sections:last-child {
  min-height:0px;
}

Answer №2

Make sure the center tag is in the correct place. Also, you can find app.css with a columns class at . This columns class has a min-height of 350px which needs to be deleted.

    <center>

<div class="large-12 columns">
            <nav class="pagination">
            <ul>
                <li><a href="" rel="nofollow">&laquo; First</a></li>
                <li><a href="" rel="nofollow">&lsaquo; Back</a></li>
                <li>1</li>
                <li><a href="" rel="nofollow">2</a></li>
                <li><a href="" rel="nofollow">3</a></li>
                <li><a href="" rel="nofollow">4</a></li>
                <li><a href="" rel="nofollow">5</a></li>
                <li><a href="" rel="nofollow">6</a></li>
                <li><a href="" rel="nofollow">7</a></li>
                <li><a href="" rel="nofollow">8</a></li>
                <li><a href="" rel="nofollow">9</a></li>
                <li><a href="" rel="nofollow">10</a></li>
                <li><a href="" rel="nofollow">11</a></li>
                <li><a href="" rel="nofollow">12</a></li>
                <li><a href="" rel="nofollow">13</a></li>
                <li><a href="" rel="nofollow">14</a></li>
                <li><a href="" rel="nofollow">15</a></li>
                <li> . . . </li>
                <li><a href="" rel="nofollow">94</a></li>
                <li><a href="" rel="nofollow">95</a></li>
                <li><a href="" rel="nofollow">96</a></li>
                <li><a href="" rel="nofollow">Next &rsaquo;</a></li>
                <li><a href="" rel="nofollow">Last &raquo;</a></li>
            </ul>
        </nav>
  </div>

  <div class="large-12 columns">
  <div id="footer">
        &copy; 2013 - <a href="http://allvixen.com/">allvixen.com</a>
        </div>

        </div>
</center>

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

"Ensure div remains at the bottom of the page even while

In order to implement a feature where the menu sticks to the top when scrolling down, you can use the following JS code. You can view a live example of this functionality on this Plunker by widening the preview window to see the columns side by side. wi ...

javascriptjqueryhtmlcss

Persist the checkbox value in the database and update the status of the label accordingly

I need a checkbox for user preference selection that is stored in a MySQL database for constant availability. The label should change to "Enabled" when the checkbox is selected and vice versa. Upon saving (submitting) the page, an alert message should disp ...

javascriptphpjqueryhtml

Creating a Music Bingo game to ring in the New Year

Looking to create a Music Bingo game for New Year's Eve with randomized songs that can be selected, but experiencing an issue where nothing happens when you have 4 in a row. Attempted adding a submit button, but it doesn't trigger any action. Ide ...

javascripthtmlcss

Having trouble sending data to an API through jQuery: the function is not functioning properly

Currently, I am in the process of developing an HTML form that allows users to input values into text fields and submit them to an external API called ThingSpeak. This API then uses the received values to generate a plot displayed within an iframe. Althoug ...

javascripthtmljqueryajax

When utilizing jQuery lightbox to pull data from a database using PHP/Ajax, it may require a double click the

Encountering a strange issue where I must click on specific buttons with unique IDs. These IDs are then sent through Ajax to a PHP script, which searches for corresponding entries in the database. The retrieved data is then displayed in a jQuery lightbox. ...

phpjavascriptjqueryhtmlajax

Desktop media queries are functioning properly, yet experiencing issues on mobile devices

I've come across this same question multiple times, but the solutions I've found so far haven't been helpful. My media queries are working perfectly on desktop, but they don't seem to take effect on three different android devices. It&a ...

androidhtmlcssmedia-queries

Struggle with the background div menu

I am trying to create a menu with a background color, but when I use "background" or "background-color" on the div that contains my menu, I can't see any color. It's frustrating because I know it should be working.. Here is the HTML : <head ...

htmlcssmenubackgroundjsfiddle

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

I am encountering an issue with dynamically loading stylesheets via JavaScript into my application. Within these stylesheets, I have various CSS variables that I need to access and modify from my JavaScript code. When the stylesheets are directly embedded ...

javascripthtmlcsscss-variables

Position two div elements evenly with text enclosed in a container

I'm looking to incorporate two distinct blocks of text into a container https://i.stack.imgur.com/6mFZK.png Criteria: Text 1: positioned at the top left corner (85% of box size) Text 2: positioned at the bottom right corner (15% of box size) I&ap ...

htmlcsstext-alignment

What is the best way to make this CSS arrow see-through?

My goal is to achieve this desired outcome: https://i.sstatic.net/4eTpE.png Currently, I have the following (focusing only on the left element for now): https://i.sstatic.net/nUFp1.png I am struggling to make the left arrow transparent and I can't ...

htmlcss

Utilize JavaScript to implement CSS using an "if" statement

I am currently working on implementing iOS web app properties into my website. My goal is to create a <div> at the top of the page and apply specific CSS styles when a certain condition is met in a JavaScript script. Unfortunately, I am facing issue ...

javascriptioscss

How can I adjust the flex spacing based on the width of the window?

My figures are evenly spaced using flex spacing, but when I resize the window, they extend beyond the parent section. Here is the HTML code snippet: <section class="features"> <figure> <img src="Images/Vanilla-Cup ...

htmlcssflexbox

Showing a solo item from an array in HTML using Angular

How can I display the account name instead of the accountId property value from my list of transaction items? I have a list of transactionitems with an accountId property, and all accounts are loaded in the accounts$ array. However, I am having trouble us ...

htmlangular

Is there a way to clear out input values in a form after some errors are caught and the rest of the data is saved upon resubmission?

Currently, I am in the process of validating my HTML contact form using PHP. To test its functionality, I have tried submitting the form with no data and then attempted again with partial data. While submitting partial data, I noticed that the correct fiel ...

phphtmlforms

Exploring the process of updating the background color of a specific component in Angular

I'm currently working on a website that will feature alternating colors of white and black. However, I am facing an issue where I can only apply background color changes globally in the CSS file. Does anyone know how to address this problem? ...

htmlcssangular

One particular page is having trouble loading CSS, whereas it loads perfectly fine on a different page

I have two pages, 403.html and 404.html, both of which need to load the same style.css file. Strangely, when I visit the 403.html page, the CSS loads perfectly fine. However, when I navigate to the 404.html page, even though it has identical code with only ...

htmlcss

Through the implementation of JavaScript, the element's class is dynamically altered

While working on my project, I encountered an issue with implementing a change in the class of an element using JavaScript. The problem is that when I click on the home page, the last page does not get deselected. Here is my current JavaScript code: const ...

javascripthtml

Combining an array of intricate data models to create

Currently, my setup involves using Entity Framework 7 in conjunction with ASP.NET MVC 5. In my application, I have various forms that resemble the design showcased in this image. By clicking on the "new" button within these forms, a Bootstrap modal like t ...

javascripthtmlasp.netasp.net-mvc

Button in Angular gets stuck when a touchscreen is long pressed

In my Angular2 application, I am facing an issue with a button when running on a Windows 10 touchscreen PC in Chrome. Normally, the button works fine and executes the click function. However, if the button is held for 1-2 seconds, it gets stuck and fails t ...

cssangulartypescript

What steps should I take to troubleshoot and fix the issue of data insertion errors in

I am encountering an issue with a PHP form that is supposed to transfer information to a database after submission. However, every time I press the submit button, I receive an error message. Can anyone help troubleshoot this problem? ...

phphtmlphpmyadmin