Footer void of color

It's puzzling to me where the extra space in my footer is coming from. It seems to be around 20-30px as you can see on the following url:

Despite the code in my footer being minimal, with no apparent cause for this additional space below my social icons.

footer {
  background: #fff none repeat scroll 0 0;
  color: #ffffff;
  float: left;
  padding: 30px 0;
  width: 100%;
}

Answer №1

Extracted from area#amenities. Utilizing Padding: 50px 0.

Answer №2

In the section#services element, there is a padding of 50px on the top and bottom. To adjust this, you can modify it to be padding: 50px 0 0 0

Answer №3

Looks like @bartek_zet beat me to it ;) Insert the following code in place of section#services.

section#services {
    float: left;
    padding: 50px 0 0;
    width: 100%;
    background: #fff;
}

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

Please include text beneath the input group addon class

Hey everyone, I'm facing some issues with my layout. Whenever the input fields are empty or null, I encounter errors. I want to ensure that the input text and input group addon have equal heights. Also, upon clicking the submit button, I use jquery/aj ...

Add a touch of shadow to a stationary top banner as you scroll through the page

Is there a way to gradually fade in a shadow while scrolling, so that the shadow only reaches an opacity of 0.5 after scrolling a certain number of pixels? I've come across solutions to add a shadow or class to the top banner based on content position ...

Having difficulty locating the html sub-elements within a specific element

As someone who is somewhat new to scraping websites with numerous sub-elements, I am seeking the best way to navigate through elements that contain desired data within deeper levels of sub-elements. Let's take a look at an example HTML snippet: <d ...

The HTML2Pdf content is spilling over the edge of the page

I am attempting to create a PDF from an HTML File using the HTML2PDF library. Here is my HTML code: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="top"> <table width="968" ...

PNG file unable to display in Google Chrome

I created an image using paint.net and saved it as a .png file. However, when I try to display the image on my website, only the borders show up without any image content. Here is the code I used: HTML <a href="home.php"><img id="logo" src="../i ...

Insert code into the notes section of Pug

Need help inserting a script into a comment on Pug? I have two scripts that need to be added to my website: <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="http ...

Eliminating pre-set CSS styles injected in Angular 2/Ionic 2 automatically

I'm encountering an issue where adding the ionic 2 gesture (press) to a button results in inline styles being automatically applied to that button. Is there a way to override the styles it adds? Button <button ion-button (press)="toggleFavourite ...

showing divs in a compact layout on smaller screens using Bootstrap 5

Is there a way to set up two div elements so that they are displayed as blocks on small screens and inline on large screens? I also need their width to span 100% of the screen. ...

When you add the measurements of two images to the top bar, you get the viewport size

Requirement 1: A top bar measuring 46px in height Reqirement 2: One photo positioned at the top and another at the bottom I have attempted the techniques mentioned on How to resize an image to fit in the browser window?. However, the images still appear ...

A versatile function that displays a loading icon on top of a specified div

Is it possible to pass an identifier for a particular div element to a function, where the function will display a loading image that covers the entire div, and then pass the same identifier to another function to hide the loading image? I am looking to cr ...

What is the best way to reveal CSS files downloaded via npm?

I'm currently working on a Sass/CSS library that I have hosted on npm. I am exploring ways to make it easier for clients to access it, such as using: @import 'library_name' Instead of the less appealing option: @import 'node-modules/ ...

Troubleshooting challenges arise with Bootstrap's button group spacing issue

I am encountering spacing issues with the markup provided below. <h2>Profitability Report</h2> <form method="post"> <div class="row"> <div class="col-md-12"> <div class="btn-group btn-group-toggle ...

How can I use the store command to retrieve the href value of a link using a css selector in Selenium?

Is there a way to store a URL from a link using CSS instead of xpath? store //tr[td[contains(.,'6 Day')]][1]/td[8]/a@href my_var open $my_var If so, how can I achieve this goal with css? I managed to use the following locator: store css= ...

Ways to ensure that a div, header, container, and other elements completely cover the viewport

Currently, I am attempting to create a header that spans the entire viewport regardless of screen size. This header will be split horizontally into 3 equal sections, each occupying one third of the header space. I experimented with setting the header hei ...

Transfer a specific row from a dataTable to another dataTable on a separate php page

Within my programming project, I am working with two tables: table1.php and table2.php In my current setup, I have a script located in table1.php that allows me to pass data to a modal which then passes the data into table2.php. However, I am now facing a ...

Tips for repositioning form fields using HTML, CSS, and Flask-WTF

I am currently developing my first web application. I require a basic form for users to input a few values. Although I have successfully implemented it, I would prefer the data entry fields to be arranged in a row instead of a column. The snippets below s ...

Tips for creating a more condensed materialized table with form elements

Currently, I am working on a timesheet table using Materialize CSS with form elements in cells. However, I find the height of the table rows to be too large for my liking. Is there any way to make the table more compact? If this is a limitation of Materi ...

Create fluidly changing pictures within varying div elements

Hello there! I have a form consisting of four divs, each representing a full page to be printed like the one shown here: https://i.sstatic.net/w7N6E.png I've successfully created all the controls using AJAX without any issues. Then, I load the image ...

Adjust google maps to fill the entire vertical space available

I found this helpful resource for integrating Google Maps into my Ionic app. Everything is working smoothly, but I am trying to make the map fill the remaining height below the header. Currently, I can only set a fixed height in pixels like this: .angula ...

Guide on importing table information into an array using jQuery

I am facing an issue where I want to extract values from a dynamically generated table and then send those values in an AJAX call. The problem is that even though I am able to increase the number of rows in the table dynamically, when I try to capture the ...