What are some ways to eliminate the excess white space beneath the footer in HTML?

After creating a responsive webpage that works flawlessly on mobile devices and tablets, I noticed a problem with the footer when viewed on desktop. There is an empty white space at the end of the webpage, and upon inspecting the browser, it focuses on the HTML tag.

https://i.sstatic.net/dARuY.png

The height of this empty space varies depending on the width of the viewport and I am using Sass in my coding. Unfortunately, I cannot share all the code here as it is spread across multiple files. If you would like to see the complete code, please visit: https://github.com/justanindieguy/podcast-landing-page

You can also view the webpage on my personal GitHub page here:

Thank you for your help. This issue is really frustrating me and I cannot seem to find a solution.

htmlcsssass

Answer №1

After testing various solutions provided by others, it seems that none of them resolved the issue on your page.

Upon further investigation, I discovered that the problem lies with the :before pseudo-element in the news section, which is overflowing from its container.

To address this issue, you can try adding the following CSS:

#news {
    overflow: hidden;
}

By adding this CSS rule, the news section will now properly contain the :before element within its own dimensions. Additionally, while I see that you implemented a layout using skew, I suggest exploring clip path generators to create this shape more efficiently.

Answer №2

To include this snippet at the beginning of your CSS stylesheet:

* {
  padding:0;
  margin: 0;
}

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

Achieving equal height in Bootstrap columns

Artwork Hey everyone, I'm facing a small dilemma. Currently, I am tackling a project with a unique design. Within the layout of this project, there is an image section that is causing some trouble for me. I am aiming to create a portion of the webs ...

htmlcssflexboxbootstrap-4

The alert dialog does not appear when clicking on "a"

Attempting to retrieve the ID of the clicked element using jQuery has proven unsuccessful for me. Below is the jQuery code I am working with: <script> $(function(){ $("a.step").click(function(){ var id = $(this).attr('id'); ...

jqueryhtml

Storing HTML form values for other pages in PHP and MySQLi can be achieved by using session variables or by

I recently set up a database using phpMyAdmin that includes tables for different topics such as Math, Physics, etc. Each topic is assigned a unique topic_id as the primary key in the table tb_topic. Additionally, each topic can have multiple videos associa ...

phphtml

What is the best way to eliminate the blue-box-fill when buttons are clicked?

Check out this screen recorded gif on my device showcasing the blue-box-fill I'm referring to: https://i.stack.imgur.com/ajr2y.gif I attempted the following solution: * { user-select: none; -webkit-user-select: none; /* Safari */ -khtml-user-s ...

css

Trouble with Bootstrap 5 Dropdown Functionality

Currently, I am using Bootstrap 5 in conjunction with Django to create a website and I'm encountering difficulties with getting a dropdown feature to work properly. Despite copying the code directly from w3schools, it fails to function when I load the ...

javascripthtmldjangobootstrap-5

Tips for resizing user-uploaded images to fit the required dimensions outlined in the design draft using CSS or JavaScript

Hey everyone! I'm facing an issue but my English isn't great. I'll do my best to explain it thoroughly, and if anything is unclear, please feel free to let me know! So here's the problem: today there's a block for users to upload p ...

javascriptcss

Redirecting files from the file system to the emulator is not functioning properly

I am new to Phonegap and need help resolving this issue. In my application, I need to redirect to the List.html file when a button is clicked. Here is the code I have written: button1 function test() { window.location="/home/swift-03/phonegapexa ...

javascripthtmlcordovaandroid-emulator

Guide on automatically logging in to a specific website using Selenium with Kakao, Google, or Naver credentials

I encountered an issue with my selenium login code for a particular website, where the keys seem to be generating errors. https://i.stack.imgur.com/wJ3Nw.png Upon clicking each button, it brings up the login tab. However, I keep encountering this error ...

pythonhtmlseleniumweb-scrapingweb-crawler

Maintaining Flexbox layout without triggering item re-rendering for a new container

This is the unique layout I'm aiming to create: I am facing a challenging flexbox layout that needs to be implemented. One of the items in this layout is a Webgl player, which cannot be conditionally rendered due to the restarting issue it may cause. ...

javascriptcssreactjsflexbox

Modify the Color of Chosen Anchors for Site Categories WITHOUT Using JavaScript

Is there a way to change the color of section anchors in a fixed header when selected without using JavaScript? I'm looking for a CSS-only solution that will change the color of the selected anchor and revert it back to normal when another anchor is c ...

htmlcssanchorsections

How can we accurately identify if string inputs include HTML tags?

When gathering user input from forms, I need to ensure that fields like "username" or "address" do not contain any markup that could pose a risk in XML (RSS feeds) or (X)HTML (when rendered). So, how can I correctly determine if the input provided does no ...

phphtmlinputxsssanitization

Tips for effectively utilizing the Angular ngIf directive for toggling the visibility of elements

<div *ngFor = "let element of myElements, let i=index" [ngClass]="{'selected':element[i] == i}"> <li> Name: {{element.element.name}}</li> <li> Description: {{element.element.description}}</li ...

htmlcssangulartypescriptangular-directive

The information is failing to display properly within the mat-menu

Recently, I've been working on creating a navbar that includes a submenu. Even though the navigation bar data is loading properly, I am facing some issues with the submenu functionality. As a beginner in this area, I would appreciate any help or guida ...

htmlangularangular-material

Tips for limiting users to inputting only alphanumeric characters and excluding special characters in an input field using Angular 8

How can I prevent users from inputting special characters in an input field and only allow alphanumeric values? The code that I have implemented so far does not seem to be working as intended. When a user enters a special character, it still shows up in th ...

javascripthtmlangulartypescript

The powers of jQuery and CSS selectors

Previously, I utilized the following code to extract text from the data-placeholder attribute and apply it as a placeholder for my div. [contentEditable=true]:empty:not(:focus):before { content:attr(data-placeholder) } While this method worked well b ...

javascriptjquerycss

Creating sequential hover animations with CSS in HTML

I have a total of four divs that I want to hover continuously, one after the other. Here is the code I am currently using: #rij1 .content-overlayz, #rij1 .content-details { animation-duration: 2s; animation-name: stepped-pulse; animation-iterati ...

javascripthtmlcssanimationhover

Achieving Vertical Alignment in a Bootstrap 4 Image Overlay Card

I am facing a challenge in trying to vertically center a FontAwesome icon within an Image Overlay Card. Despite attempting various methods like using d-flex and justify-content-center, none of them seem to be effective. What could I be overlooking? < ...

htmlcssbootstrap-4overlayvertical-alignment

"Creating Rounded Corners in HTML: A Step-by-Step Guide

Is there a way to round the corners of this image? Below is an excerpt from my body... <body> <h1 style="float:left; width:37%;"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h1> <div style= ...

htmlcssimageborder

Using CSS to Create a Background with RGBA Color and Image

Having an issue with my CSS. I'm trying to create a scrolling background for the left section of my website. The RGBA is currently overlapping the entire page, but I only want it to overlap the background image. The same goes for the gridtile (the ov ...

htmlcss

Tips for keeping the background image in place while resizing the page

How can I set the background image for the whole page without it changing position with resizing? The image is 3065px in height so that should not be the issue. .bg { background-image: url("#"); height: 3065px; width: 100%; background-positio ...

cssbackground-image