The footer is displaying unusual white space beneath it

Recently, I attempted to create a sticky footer using Flexboxes and the <Grid container>

Check out the code on Codesandbox

However, an issue arose - there was a strange whitespace below the footer.

https://i.sstatic.net/2YdaJ.png

After some experimentation, I discovered that the whitespace disappears when smaller text is placed in the first grid item of the footer.

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

I am struggling to identify the source of this whitespace. Any assistance would be greatly appreciated.

htmlcssreactjsmaterial-ui

Answer №1

Tutorial for navigating Firefox

  • Begin by pressing Ctrl, Shift, and C to access the inspector tool
  • Select your footer element on the webpage
  • Navigate up through the hierarchy until you identify the empty space
  • In this scenario, the empty space is within the body with a margin
  • Adjust the margin of the body element to set it to 0
  • Task completed successfully

Edit:

  • Even after applying the fix, the margin on the body remains unchanged
  • Upon discovering that the issue is only visible in full-screen mode, open the inspector in that view
  • Identify that the problematic space is located in the footer, where the contained div does not expand fully to the bottom due to limited content
  • Consider utilizing a flex container around the footer to resolve the issue; however, note that wrapping is currently enabled
  • If you prefer the footer not to wrap upwards, disabling wrapping resolves the space concern, as the main content div has flex grow functionality enabled

Answer №2

To improve your code in app.js, try adding margin:0; This adjustment worked for me while using react.js. You could also consider changing the text editor and working on a full page with the inspector to better understand your issue. It's possible that the problem lies with the editor during compiling.

body: {
        margin:"0",//This Added
        height: "100vh",
        backgroundColor: theme.palette.background.default
      }

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

Encountering an ENOENT error in the CodeSandbox CI environment, whereas this issue does not arise in GitHub

I am currently in the process of creating a GitHub pull request for the react-querybuilder library. However, I am encountering an issue with my CodeSandbox CI job, which is failing and displaying the following error message: { [Error: ENOENT: no such file ...

reactjstypescriptcontinuous-integrationcodesandbox

I'll show you how to implement custom fonts in TailwindCSS and NuxtJS!

Currently, I am in the process of developing a website using NuxtJS along with Tailwind CSS for styling. To incorporate my desired fonts, I have utilized the @nuxtjs/tailwindcss module. Despite applying the correct font-family through CSS, it seems that m ...

cssvue.jsfontstailwind-cssnuxtjs

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

I am facing an issue retrieving my Strapi data within my Next.js application

I am currently working on developing my portfolio website using Next.js and Strapi, but I am facing challenges when it comes to displaying the data from the about page on the screen. Even though I am able to fetch the data using Postman, I seem to encounte ...

reactjsnext.js

Struggling with the display property d-none in Bootstrap

I'm currently attempting to show a segment of my code exclusively on medium-sized screens and larger, while displaying another portion of the code solely on small and extra-small screens through the utilization of Bootstrap. I made use of Bootstrap&ap ...

htmlbootstrap-4

What is the best way to show JavaScript output with span style?

I have added a translation feature that allows users to switch paragraphs to French when clicked. Each paragraph now has the first word wrapped in a span with a CSS class that enlarges and colors the text. However, I am facing an issue where when switchi ...

javascripthtmlcss

Keyboard control of Material UI Checkbox

As we work on developing a web application using react and material ui, accessibility for persons with disabilities is a key consideration. This means ensuring that the web application is operable through keyboard navigation. It's important that user ...

javascriptreactjsmaterial-ui

Incorporating unique typography onto your website (HTML/CSS)

I am currently struggling to implement a custom font on my website. I'm not very experienced with programming, and since my friend isn't available to help, I'd appreciate a solution from anyone. The issue I'm facing is that while the Ca ...

htmlcss

Error in the react-tailwindcss-datepicker component

For a while now, I've been using tailwindcss and have always been quite satisfied. However, I am currently encountering significant issues with the react-tailwindcss-datepicker. The datepicker works fine in an empty project, but in my current nextjs p ...

reactjsnext.jsdatepickertailwind-css

Using Font Awesome icons instead of markers in Leaflet

Within this code snippet, I initially utilized data[key].category to represent the corresponding icon as a marker. However, my intention is to switch to Font Awesome icons for a more lightweight runtime experience in instances where multiple icons may ne ...

javascriptcssleafletfont-awesome

sketch a portion of a picture on a canvas

My challenge involves a canvas with dimensions of 400 by 400, and an image sized at 3392 by 232. I am looking to crop the first 400 pixels of this image and display them within the canvas. How can I achieve this task? $(document).ready(function () { v ...

javascripthtmlcanvas

A guide on identifying the data type of a value entered into an HTML table using JavaScript

Currently, I am tackling a contenteditable HTML table challenge. My goal is to enforce the insertion of only numeric values while alerting the user if they attempt to input strings or non-numeric characters. Can anyone provide guidance on how to achieve th ...

javascripthtmlhtml-tablecontenteditable

Creating equal-sized borders for symbols of varying sizes: a step-by-step guide

Utilizing Font Awesome icons along with their fa-border style: <i class="fa fa-twitter fa-5x fa-border icon-blue"></i> <i class="fa fa-question fa-5x fa-border icon-grey"></i> The border size created varies based on the symbol siz ...

cssfont-awesomefont-awesome-4

The validation of DOM nesting has found that a <li> element should not be nested inside another <li> element

I am receiving a warning message in the console that says validateDOMNesting(...): cannot descendant of li. The error is pointing to the treeview and timeline components, but I'm not sure where exactly in the code needs fixing. The snippet below is ca ...

reactjsmaterial-ui

Ways to exchange the background hues of the Paper element between a dark and light theme in material UI

Using Material UI, I have successfully implemented a button in the navbar that toggles the theme from light to dark: const [darkMode, setDarkMode] = useState(); function changeTheme() { setDarkMode(!darkMode); } return <Navbar changeTheme={chan ...

reactjsmaterial-ui

Dynamic resizing in NextJs does not trigger a re-render

My goal is to dynamically pass the width value to a component's styles. Everything works fine on initial load, but when I resize the window, the component fails to re-render even though the hook is functioning as intended. I came across some informat ...

javascriptcssreactjsreact-hooksnext.js

Adding an onClick event to a React MUI Fab: A Step-by-Step Guide

I'm attempting to incorporate the Floating Action Button from MUI5. Visit: https://mui.com/material-ui/react-floating-action-button/ for more details. Upon adding an onClick event to the button, no action is triggered. Below is my code snippet: <G ...

javascriptreactjsmaterial-ui

Make sure the division remains fixed even when the window is resized

Having a fixed position and bottom set to 0, I want my div to display at the bottom of the window. The issue arises when the window is resized, causing the div to move up and into other elements. For instance, when opening the console box in Chrome, the f ...

javascriptjqueryhtmlcss

Next.js deployments on Vercel are encountering issues with resolving local fonts

Currently, I am facing an issue while trying to incorporate next/fonts into my project in next.js 13.3. The setup works perfectly on my local machine, but as soon as I deploy it to Vercel, a build error arises with the message Module not found: Can't ...

javascriptreactjsnext.jsfontsvercel

Ways to initiate animation using CSS when the page loads

Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads. Here is the JavaScript code: var root = document.querySelector(':root ...

javascriptcssanimationtextcounter