The sliding content in the div below the one above it

Currently working on creating my portfolio website, and I have implemented a very dynamic parallax homepage with multiple layers. My goal is to enable one-page scrolling by using vh units. However, I encountered an issue where the div containing the about section slides under the homepage when the viewport height is reduced significantly. It seems like the homepage is not adjusting to make space for the about section, almost as if there is an offset present. I have attempted using clear under the first div but it did not solve the problem. Please see the screenshot of the issue here: I suspect that the problem lies within the CSS properties of the parallax effect, which are structured as shown in this link: It appears that the layers of parallax - #parabg, #scene, and #home - act as wrappers. Any suggestions or insights on how to resolve this issue would be greatly appreciated. Thank you!

htmlcssparallaxresponsive

Answer №1

It's truly a miracle when you discover the solution right after posting your question. If you're struggling with a complex parallax effect and have been following the confusing documentation of parallax.js, remember not to use padding-top! I'll be creating a codepen shortly for those interested in implementing a fully responsive multi-layered parallax design.

#parabg {
background: url(../assets/parallaximages/home/bg2.png) no-repeat 50%;
background-size: cover;
/*    padding-top: 52%; */
width:110%;
height: 100vh;
margin-left:-5%;

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

Data is not being stored in Parse

I am currently facing a challenge while working with Parse for Javascript: When users sign up, along with their username and password, I also need to save their first and last names in Parse. However, at the moment, only the username and password are bein ...

javascriptjsonhtmlparse-platform

Two Mistakes Found in the Dropdown Menu

Can anyone assist me with two errors I am encountering in my "Drop Down Menu"? Error 1: Whenever I hover towards the right direction in the sub-menu (e.g., Portfolio 2), a black box appears. This issue does not occur when hovering above the text (e.g., P ...

cssdrop-down-menu

Guide on transferring the td id value to a different page

document.getElementById('scdiv').innerHTML=Quantity <td id="scdiv"> </td> document.getElementById('quantitydiv').innerHTML=mrp <td id="quantitydiv"> </td> I am currently facing an issue where the code is being d ...

javascriptphpjquerycssajax

Python is experiencing difficulties with copying xpath elements

I attempted to utilize some Python code to access Twitter and retrieve the "Happening now" text. Unfortunately, it was unsuccessful. import webbrowser print("Visiting Twitter.com...") webbrowser.get('C:/Program Files (x86)/Google/Chrome/Application/c ...

javascriptpythonhtmlselenium

Is there a way to incorporate text at the end of a row in HTML?

I have a photo and some text on my website. The photo is displayed on the left side, while the text appears nicely on the right side. Now, I am looking to include an additional block of text below the existing text. How can I accomplish this? What steps ...

javascriptcsshtml-table

JQuery's attempt to disable the 'hover' feature fails to function as intended

I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...

jqueryhtmlcss

What's the best way to rearrange Bootstrap cards from a horizontal layout to a vertical layout for improved responsiveness?

I'm currently working with Bootstrap to align two cards horizontally, but I also want to ensure that mobile users can view the cards stacked in a column layout. I've experimented with adding 'flex-direction' in combination with the @med ...

htmlcssresponsivecard

Splitting the page into four sections with a unique H layout using CSS styling

Attempting to create an H page layout: body { background-color: grey; background-size: 100%; background-repeat: no-repeat; } html, body { height: 100%; margin: 0px; } .a { float: left; width: 25%; height: 100%; border: 1px solid blue ...

htmlcssflexboxcss-float

Unable to connect the CSS file from the JSP during a Cross Domain request in Internet Explorer 9

I have created a GWTP web application and am making AJAX calls to a JSP page on a different domain (Cross domain) from the GWT client side. Most of the time, the CSS files are linking correctly and working fine. However, occasionally they do not link prop ...

htmlcssjspgwt

Using jQuery, wrap two specific HTML elements together

I am working with a set of elements: <div id="one">ONE</div> <div id="two">TWO</div> <div id="three">THREE</div> <div id="four">FOUR</div> <div id="five">FIVE</div> My goal is to wrap a DIV tag ...

jqueryhtmlcss

How can I load only specific images on a webpage using HTML?

I attempted to implement an image filter for my website by using the code below: <script> function myFunction() { // Initialize variables var input, filter, ul, li, a, i; input = document.getElementById('myInput'); filter = input.value.toU ...

javascripthtmlcss

Preventing click events with pointer-events property in CSS while still allowing scrolling

Is there a way to use pointer-events: none to disable click events on a specific container while still allowing scroll functionality and an overlay? You can view my fiddle here: https://jsfiddle.net/1eu6d3sq/1/ Currently, when I apply pointer-events: non ...

javascripthtmlcss

Java servlet is unable to interpret the name of an html select tag

Currently, I am implementing a feature where table rows with select boxes are added dynamically and the values of these select boxes are retrieved in a servlet. The process of adding the select boxes is functioning properly; however, when attempting to ret ...

javascriptjavahtmlservlets

"Addressing the issue of ineffective form validation for empty or whitespace inputs

I've been working on creating a form and everything seems to be going well except for the validation aspect. It doesn't highlight when intentionally left blank or filled with spaces. I have included "required" in the HTML which partially achieves ...

javascripthtml

Ensure that the context is used to effectively clear any existing data from the previous bar chart

I recently came across a cool codepen demo on this link. Upon clicking the first button followed by the second, the data transitions smoothly. However, there seems to be an issue where when hovering randomly over the bar charts at this source, the value ...

javascripthtmlcss

The width of the TD element does not affect the grid

<div id="unique-example" class="k-unique-content"> <table id="unique-grid" style="float: left; position: relative"> <thead> <tr> <th width ="410px"data-field="UniqueFileName">Unique File Name ...

htmlcssrazor

Adding a bootstrap label on the corner of a div using overlay technique

I'm attempting to superimpose a bootstrap label in the corner of a DIV. My goal is to position the label in the top left corner of the div, partially overlapping it. Thank you <div class="span4" style="border-bottom: none; border-top: 4px s ...

htmlcsstwitter-bootstrap

The subscription data for nested classes appears to be displaying as undefined

In my current project, I am utilizing Angular 8 and facing an issue with a nested class. The problem arises when trying to access data from an observable subscribe operation in the child class (Players) within the main Tournament class. Until the data is r ...

htmlangularnested

Generate a list of users using Angular in an efficient manner

I am working on creating a user list similar to the image provided below. I am using Angular and Bootstrap for the basics of this project. However, my concern is how to efficiently handle a large number of users. If the user count exceeds 10k, what would b ...

angularjshtmltwitter-bootstrapmongodbexpress

The checkbox tab index fails to function properly when set to hidden with a custom design

I have implemented a custom design for a checkbox using CSS. label { position: relative; margin-bottom: 0.5em; } .input-field { width: 100%; border: 1px solid #ecf0f1; padding: 0.5em; } input[type="radio"], input[type="checkbox"] { display: ...

htmlcsscheckbox