So I designed a scrolling parallax header that looks great, but when I published it, some of the elements that are extended past the view window, force the whole thing to get bigger. Like I have elements that are enlarged beyond the view window and a scroll bar appears on the bottom so I can scroll and see the enlarged elements, they also extend lower so it shows space under my footer as well. I was wondering if there is a way that when the element is out of the view window to get it to just not affect the page size.
It is the design page that is having the issue.
Thanks.
This is my share link but I am also posting the published link so you can see what I am talking about.
Oops, my mistake! We probably don’t want to mess with the body element.
Instead of " Body 6 > Overflow: Hidden "_ make Parallax Header Section > Overflow: Hidden, and keep its position "RELATIVE. I tested it here and it worked.
thanks man that worked perfectly. I tried making the the overflow of the parallax header section hidden but had its position at static and I think making it relative made the difference.
Mad kuddos for the help.
How do you think the parallax looks?
Hahah, thank you for your appreciation. You will always want to check the position settings when you have elements moving around. That little box “relative to” is what showed me where the problem was.
You parallax looks amazing. It stuttered a bit when I opened it on chrome, but when I used Firefox it was super smooth. I don’t know what’s happening with my GC.
Little tip: If you can make those trees at the background a little bit less blurry, it would be nice. Sometimes it gives the impression that they are blurry because of a low-res image, even though I know that this isn’t true.
