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

Issue with Flex display not being applied within Material UI Grid Item

I am attempting to position an element at the end of a Grid Item (horizontally). In order to achieve this, I am enclosing my component in the following div: Here is the complete code snippet: <Grid container spacing={8} alignItems={'stretch' ...

htmlcssreactjsflexboxmaterial-ui

Footer not sticking to bottom using bootstrap version 5.2.2

I am currently working on a project using Laravel Inertia Vue and bootstrap 5.2.2 as part of my dependencies. After loading the css to the tag, I attempted to create a sticky footer. However, I found that the footer is not sticking to the bottom as expect ...

csslaravelvue.jsbootstrap-5

Animating distance with the power of animate.css

I have implemented animate.css for a login form, but it is not behaving as desired. Currently, I am utilizing the fadeInDown animation, however, it is fading in from a greater distance than intended. I would prefer it to fade in from just around 20px below ...

htmlcssanimationanimate.css

Adjusting the Size of a Slideshow: HTML Tutorial

I'm currently working on a project to develop an interactive website using PHP and HTML for educational purposes. My main challenge is trying to implement a 'slideshow' similar to the one demonstrated in this video: https://www.youtube.com/ ...

phphtmlcssslider

I'm wondering why my .focus() function is causing the cursor to move to the start of my contenteditable div?

I am currently developing a website for writing books, primarily using php. I have implemented a jQuery function that, upon clicking the "New Chapter" button, triggers an AJAX function along with various other JS/jQuery events. One of these events is inten ...

javascripthtmljquery

Javascript data table pagination and custom attributes resulting in unexpected truncation of strings

Currently, I have implemented an Ajax functionality in my template to receive a JSON response and dynamically populate a datatable with the elements from that JSON: $('.bicam_tests').click(function(){ $.ajax({ type: 'GET', ...

javascripthtmlajaxdatatable

Stop automatic downloading of files and instead, visualize the file within a PHP form using an iframe

Can anyone assist me with displaying a doc, docx, or pdf file in PHP code? Below is the code I have been trying: <iframe src="http://localhost/sample/sampl1/resource/upload/resumes/1406263145_resume sample.docx" style="width:820px; height:700px;" frame ...

phphtmlmysql

What could be the reason for my flex items not shrinking when the browser window size is decreased?

Here is the CSS code for the header component using flexbox: .header { display: flex; flex-direction: row; justify-content: space-between; padding: 15px 20px; background-color: #ffffff; position: sticky; top: 0; z-index: ...

cssreactjsflexboxmaterial-ui

Mastering the Art of Customizing Styling in Ant Design

I'm currently working with a table from Ant Design, but I'm facing an issue where the padding or margin applied by the Ant Design CSS is preventing the table from expanding on the left side. The table has an inline CSS of table layout: auto which ...

cssreactjsant-design-pro

What is the method for HTML inline handlers to retrieve the global window object and the variables contained within it?

During my coding test, I encountered an interesting scenario. I had a function called write and used a button with an inline onclick handler to trigger the write() function. function write(text) { alert(text) } <button onclick='write("Some tex ...

javascripthtmlscopedom-eventsglobal-scope

Changing the height of one Div based on another Div's height

I currently have a display of four divs positioned side by side. I am seeking a solution to ensure that the height of each div remains consistent, and should adjust accordingly if one of them increases in size due to added text content. For reference, ple ...

javascriptjqueryhtmlcss

jQuery parent() Function Explained

checkout this code snippet - https://jsfiddle.net/johndoe1994/xtu09zz9/ Let me explain the functionality of the code The code contains two containers: .first and .second. The .first container has two default divs with a class of .item. The .second contai ...

javascriptjqueryhtmlcsstwitter-bootstrap

The DOM assigned a new source to an image

Currently, I am working on a project that involves both jquery and PHP. In this project, users are able to upload images which are then displayed in blocks. The uploading functionality is already working, but I am facing an issue with setting the image sou ...

javascriptphpjqueryhtmldom

Instructions on how to automatically close a Bootstrap 5 alert without using jQuery

With the removal of jQuery as a dependency in Bootstrap 5, I have been exploring ways to automatically dismiss an Alert after a set duration using raw Javascript. Below is a snippet of my current approach. I believe there is room for optimization or a bett ...

javascripthtmlbootstrap-5

Tips for achieving a gradual transformation of an element according to the scrolling position

I have been experimenting with using waypoints for two specific purposes. The first objective is to determine whether a user is scrolling up or down and if the container comes into view. However, this functionality is not working as expected. The sec ...

javascriptjquerycssscrolljquery-waypoints

What is the best way to align the main navigation at the center of

Even though I have utilized text-align: center, the style of .main-nav did not change. What is the most effective way to center this navigation menu? /***** Navigation *****/ .main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; f ...

css

Create a variable and set it equal to the value of a form

I'm having trouble setting a value to a hidden form field that needs to come from a query string parameter. The function that extracts the query string parameter is working properly, but the function that assigns this variable to the hidden form field ...

javascripthtmlforms

Is it possible for jQuery UI Tabs to load entire new HTML pages?

In my index.html file, I have set up 3 different tabs. Using the jQuery UI function tabs(), I am attempting to load an HTML page via Ajax. Each HTML page includes the jQuery library and contains the following code: <link type="text/css" href="css/redmo ...

javascripthtmljquery-uijqueryjquery-tabs

What is the best way to include a scrollbar in a modal window?

Does anyone know how to add a scroll function to my modal in CSS? I have too many elements and would like to implement a scrollbar. You can see what it looks like here: Any suggestions on how to add the right scrollbar? If you need to reference my CSS, y ...

htmlcssmodal-dialog

Tips for aligning column components in a vertical position

My task is to align vertically the elements within multiple columns that include a headline, a description, and a button. By default, each element expands based on its content size https://i.stack.imgur.com/RJJP4.png However, I need all elements to be al ...

htmlcssalignmentcss-grid