Parallax spacing issue


I am working on the site below and we added a small section right above a parallax section “Brewing”. When the page is loaded the new section overlaps the start of the parallax section and all lower section spacing is shifted relative to the background. If you refresh while the section is in view, the spacing adjusts correctly.

hey there

ok, I saw it on your video but I was not able to replicate the same on the website, I tried it many times and from the first load it does not seems to be a problem right now, is this problem resolved?

Hi Noda,

I few more roasters were added so it spaced things out a bit. The issue is still there. If you initially load the page and scroll down the Brewing parallax background is offset from the main content. If you refresh while that section is in view, it fixes it. So it only seems to be an issue when the page is loaded or refreshed while the window is above those sections. I’ve replicated it on Chrome and Safari.

I found that by forcing the height the parallax sections load properly. Do you know if there is a workaround for this since that roasters section is dynamic and will grow/shrink week to week.

Hey there

Ok, lets try to set minimum height to the parallax section:

#shapely_home_parallax-5 {
min-height: 300px;

You can also do the same for your custom widget section to force minimum height