Troubles with Page Alignment When Scrolling and Adding Content in HTML and CSS

Question

Troubles with Page Alignment When Scrolling and Adding Content in HTML and CSS

Currently experiencing some challenges with my HTML/CSS code, which seems like a simple fix but is proving to be tricky for me at the moment.

To showcase the issue more clearly, I have placed the code in a JSFiddle.

Issue Summary:
Upon accessing my site from a mobile device, it appears excessively zoomed out. In an attempt to resolve this, I added the following code:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

. This adjustment did help with the zoom problem, however, it did not address the layout discrepancies that are now occurring when additional content is added and the user scrolls down. The design seems to break, particularly on mobile devices.

Thank you!

html css

Answer 1

Answer №1

It appears that the issue lies in the background not extending to cover the entire page. To rectify this, try making the background remain fixed when scrolling. This adjustment can be made with the following code:

#vanta {
    position: fixed;
}

Instead of using your current code snippet which is:

#vanta {
    position: absolute;
}

I trust this solution will address the problem effectively!

Answer 2

It appears that the issue lies in the background not extending to cover the entire page. To rectify this, try making the background remain fixed when scrolling. This adjustment can be made with the following code:

#vanta {
    position: fixed;
}

Instead of using your current code snippet which is:

#vanta {
    position: absolute;
}

I trust this solution will address the problem effectively!

Troubles with Page Alignment When Scrolling and Adding Content in HTML and CSS

Answer №1

Similar questions

Ways to make the submenu display underneath the main menu

Adjusting the space between div elements when resizing the window

Changing a variable in an HTML file using a JavaScript file

Refreshing content with Ajax when the back button is clicked

Leveraging jQuery's .animate method to create engaging search box animations

Disable the button on smaller devices

The swiper slider loop malfunctions when the number of slides is less than the double-value

Unexpected lack of parameters in a function triggered by an event listener's callback

Save information to a server-side .xml file with the use of either JavaScript or PHP

Is it possible to invoke a JavaScript function within a React.js application?

Tips for utilizing the JQuery feature to clear input text

Looking to include some extra padding when an item is displayed - jQuery

Animating Brightness and Contrast in CSS

Map region indicator tooltip

What is the best way to incorporate font-awesome icons into a Rails view?

Disarray in the form elements

Issue with fadeout() on absolutely positioned element loaded via AJAX in jQuery

Minimize the vertical gap between menu items when they wrap onto a new line

Unable to concentrate on HTML input elements

What exactly is the purpose of the double ampersand selector, '&&', when it comes to overriding the root class with makeStyles within Material-UI React?