Unoccupied void beneath the webpage

I am working with styled-components CSS and trying to address a formatting issue. How can I adjust the code to eliminate the extra space below the displayed web content?

const Tetris = () => {

    return (
        <StyledTetrisWrapper>
            <StyledTetris>
                <Stage stage={createStage()} />
                <aside>
                    <div>
                        <Display text="Score" />
                        <Display text="Rows" />
                        <Display text="Level" />
                    </div>
                    <StartButton />
                </aside>
            </StyledTetris>
        </StyledTetrisWrapper>
    )
}


const StyledTetrisWrapper = styled.div`
    background: url(${bgImage2}) #000;
    width: 100 vh;
    height: auto;
    overflow: hidden;
    background: cover;
`



To see an example of the issue, check out this image: view error screenshot here

Answer №1

const CustomizedWrapper = styled.div`
    background-image: url(${customBgImage});
    width: 100%;
    height: 90vh;
    overflow: hidden;
    background-size: contain;
    `

I implemented a custom background image with reduced height and contained size.

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

Continuous animation for a sequence of overlapping images with smooth transitions

Currently, I am in the process of developing a JavaScript script that will cycle through a series of images within the same <div>. The goal is to create a seamless animation effect with the image transitions. Although the images are cycling through, ...

Guide on creating several TypeScript interfaces that share identical type structures

export interface UserFailureResponse { statusCode: number statusMessage: string } export interface UserCreateResponse { statusCode: number statusMessage: string } export interface AuthCheckResponse { statusCode: number statusMessa ...

Utilizing Dual Destructuring for Handling Undefined Main Objects

Before we proceed, I want to clarify that my question is not a duplicate of ES6 double destructure Let's examine the code snippet related to Apollo Client GraphQL: import { gql, useQuery, useMutation } from '@apollo/client'; ... const { loa ...

The asp.net masterpage is not utilizing the stylesheet

I have the code snippet below in the MasterPage.master file of my project: <%= ConfigurationManager.AppSettings("System").ToString() %> <asp:ContentPlaceHolder ID="Stylesheets" runat="server"> <link rel="Stylesheet" href="/App_Dat ...

jquery's animation causing elements to move abruptly when containing text

For the past hour, I've been grappling with jQuery and could really use some assistance. The following example showcases smooth animations: when you click on either of the divs, the selected div will move left or right if the viewport is wider than 70 ...

What is the best way to set the position of a button in TypeScript React?

I'm currently working on positioning a button in TypeScript React. Here is the code I have written so far: <Button key="copy-to-clipboard" id="copy-to-clipboard" text="Copy" icon="file_copy" ...

Modify the design of the button in the CSS code

I am facing an issue with the layout of the Visible Columns button and unable to standardize it like the buttons above using CSS enter image description here The code snippet for the Visible Columns button is as follows: import React, { useState, useEffe ...

Adjusting the transparency of numerous elements using JavaScript or jQuery

My task involves creating a large form where elements initially have an opacity of 0.5, and when a button is clicked, the opacity changes to 1.0. While I can achieve this using JavaScript, I want to find a more efficient way by avoiding individual if state ...

The DIV element fails to encompass all of its content

There seems to be an issue with the only div element on my page. It's covering the middle of the page, but I managed to make it extend all the way down using CSS tweaks. However, there is a problem - the video inside the div is overflowing: Below is ...

Display loader while waiting for file to be loaded

I am utilizing ajax to retrieve a file. The loading animation is functioning properly with the ajax request, however, the file size is notably large. I am interested in implementing a preloader that will display until the file has finished loading. ...

Once gatsby-plugin-sass is included in the gatsby-confis.js file

plugins: [ `gatsby-plugin-react-helmet`, `gatsby-plugin-sass`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images`, }, }, `gatsby-transformer-sharp`, `g ...

The art of positioning in menu - absolute versus relative

Struggling with positioning absolute divs is a common challenge for many of us. In my case, it's horizontal sub-menus with the following CSS: ul.children{ display:none; position:absolute; } ul.children li{ position:relative; height:60px; float:none; ...

Stop the continuous refreshing of React components

I'm working on a React-based web page with Material-UI that features a Babylon JS 3D view. My goal is to make the web page responsive so it can adapt to different window sizes. Additionally, I want users to be able to click on a Babylon JS button (c ...

Tips for adding spacing when the sidebar collapses and expands in a React application

I am attempting to achieve a layout where the body adjusts its space when the sidebar collapses and expands. Here is how it appears when the sidebar expands: see expanded sidebar here And this is how it looks when the sidebar collapses: see collapsed s ...

Using the ::before selector to loop through td with Sass

I've recently started using sass and I'm encountering some difficulties with the ::before syntax within a @for loop. My table row consists of six td elements. <tr> <td></td> <td></td> <td da ...

Font-face src with local() is incompatible with Android devices

(I apologize for not discovering this earlier, but it seems that Chrome-Android also does not support the font I intended to use. The fallback-to-sys-default-font-trick used by Chrome-Android did fool me.) I had planned to incorporate unicode-range to add ...

Changing the look of your website with PHP and a drop-down selection bar

Recently, I implemented a drop-down menu that allows users to choose a theme for the website. While this feature works fine, I'm facing difficulty in loading the selected theme upon pressing the "Apply" button as I am fairly new to PHP. I am aware tha ...

Can you explain the concept of "cascading" within CSS?

Can someone kindly explain the specific definition of "Cascading" in Cascading Style Sheets (CSS)? I have heard conflicting perspectives on this topic, so I am seeking clarification here. Any examples to illustrate would be greatly appreciated. ...

What is the best way to align a badge icon regardless of the avatar's size?

I'm working on creating an avatar component with badges. However, I'm facing an issue with the positioning of the badges relative to the avatar size. The image below provides a clear illustration of the problem. Can you guide me on adjusting the ...

Troubleshooting a visual problem using react-easy-crop within a React MUI Dialog

I'm having trouble adjusting the layout of MUI Dialog in combination with react-easy-crop. My goal is to achieve a perfect display of the dialog using react-easy-crop. However, the react-easy-crop component is covering the entire dialog. I attempted t ...