What causes the white empty space on a page when the width is decreased?

[this is the page] https://i.sstatic.net/4TjC4.png Upon creating this page, I encountered an issue where unnecessary white space appears when the page size is reduced. The page is divided into three sections, each set to 100% width and 100vh height (with varying heights). I'm unsure of the cause for this behavior. To investigate further, I used inspect element to reduce the page width and observe its response to smaller sizes. While I have a lengthy CSS code (~400 lines), I'm happy to share it with someone who might have insights into what could be causing this issue.

:root {
                --main-white: #f0f0f0;
                --main-red: #be3144;
                ...
            }

            /* HTML Document */
            <!DOCTYPE html>
            <html lang="en">
            <head>
                ...
            </body>
            </html>

Answer №1

The issue you are experiencing seems to be stemming from a fixed width setting buried deep within the codebase. This scenario is quite common and your situation is no different.

Upon investigation, it appears that there is a specific element with a fixed width property that is also being manipulated in some way. The culprit can be pinpointed in the following snippet of your code:

#projects h1::after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 68rem; // <<-- this line is likely causing the issue
  height: 2px;
  background-color: var(--main-white);
}

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

Unable to invoke Kendo JavaScript

I'm facing an issue with my source code where I am trying to call kendo.all.min.js. Everything works fine when I call kendo.common.min.css and kendo.default.min.css, but as soon as I try to call kendo.all.min.js, I encounter the following error: http ...

Creating CSS media queries for two specific breakpoint ranges can help to optimize the layout

My current design presents a challenge on larger screens (1400px+) where there is a wide content area with three side columns. As the screen size decreases, the number of aside columns reduces and the main content shrinks accordingly. This situation requir ...

Exploring techniques for showing a block div when hovering over an a tag

How can I make a div tag appear when hovering over an anchor tag? "Service" is the ID of the anchor tag "Services" is the ID of the div tag Here is my HTML code: <ul><li><a href="#" id="Service">Services</a>< ...

Can someone assist me with positioning an HTML child element to appear behind a parent element using CSS?

I need help displaying an HTML element behind a fixed header in my webpage. I want the div element (which is a child of the header) to appear beneath the header like a dropdown menu. However, I've tried adjusting the z-index and position properties wi ...

Show or hide a div based on the visibility of another div in Angular using *ngIf

Looking for a way to dynamically display images based on the visibility of another image? Consider the code snippet below: <div *ngFor="let badge of user.progress.unlockedBadges"> <img id="{{i}}_unlockedImage" *ngIf="badge == achievemen ...

Transferring HTML content using jQuery AJAX and PHP

Can anyone help me with displaying the content of a division on one page to another? <div id="box-cont" class="box-content"> <?php echo $stat;// Includes multiple images and s ...

Tips for properly aligning numbered lists in text documents

My issue involves designing an order list paragraph where I also need a paragraph in the middle of the ordered list numbers. The first paragraph is displaying correctly, but the second and third paragraphs are only appearing as single lines, so I adjuste ...

the list item choices are not showing up as they should

Hey there! I could really use some assistance with a couple of issues I'm facing. I'm trying to display list-items on my website, but two problems keep popping up: I'd like to replace the normal bullet points with a V image The list i ...

Animating the top percentage with a delay - a step-by-step guide

There is a div currently positioned in the middle of the window. I am looking to implement a functionality where, after a 3-second delay, it smoothly transitions to the top of the screen. How can this be accomplished? Below is my progress so far (https:// ...

"Transfer" the code within a Message Sending template

Although I am not well-versed in coding like many of you, I have been able to customize a free template to suit my needs. However, I am struggling with one aspect. When users submit their information on the contact form, I want their message and details to ...

Tips for placing a side navigation button on top of the side navigation bar

Having trouble implementing the open and close button for side navigation along with a search bar above the side navigation, similar to the example shown here. I am utilizing bootstrap 4 as my framework. Feel free to check out the source code on https:// ...

Obtain Identifiers for LI Data from Dynamic Content

I am currently working on a functionality where the user can assign deliveries to different vans based on the number of vans they have available for the day. However, I am facing an issue where the button does not seem to be functioning properly as it is n ...

Challenges arise when IE distorts featured images in a Wordpress theme

I've set up a Wordpress theme that utilizes featured images as header images on pages to allow clients to easily make modifications themselves. The header image container needs to be a fixed size (100% width of the page and 300px height), so I'm ...

Stopping the spread of popup alerts: A comprehensive guide

I'm having trouble explaining this in English;-) Whenever I select an option, an alert pops up for each choice and I don't know how to stop it. Step 1: Choose the "aaaa" option, for example 1111 alert ... Step 2: Choose the "bbbb" option, for ...

Using ng-keypress in AngularJS to trigger a function

I have a send button and when I click on it, I want to send the text from an input field. Additionally, I want the text to be sent when the 'enter' key is pressed on the keyboard. I have tried two different solutions but nothing seems to work. B ...

Tips for showing a message in the modal after a user completes the registration process

This code snippet contains an HTML form for user registration. Upon clicking the register button, users are redirected to another page. However, the desired outcome is to display the message on the same modal form. <div class="popup"> ...

Navigate through inner divs on iOS using VoiceOver by performing a 3-finger swipe up or down

I'm currently experimenting with VoiceOver and scrolling, specifically the three-finger swipe up/down gesture on my test page located at: http://107.170.41.208/AccessibleHTML The test page consists of a div with scrollable content (red background) f ...

Having trouble assigning a value to ng-model following a mathematical operation

Currently, I am in the process of developing a filter that allows users to choose a property location based on specific parameters. The filter will allow users to select multiple criteria, and from there, I will perform arithmetic calculations to determine ...

The dragging and dropping feature for HTML input type="file" is not functioning properly in Edge and IE11

I've developed an Angular app using this sample where I have included only an input control on the screen. Within my project, I constructed a custom file-uploader component. While I am able to drag and drop files in Chrome, I encountered issues with d ...

Update the div element without needing to reload the entire page

Is there a way to reload a div tag without refreshing the entire page? I understand this question has been asked before, but I want to make sure I have a clear understanding. <p>click HERE</p> <div class="sample"> <?php functi ...