Canvas Support

Header content gets cut off in short windows due to parallax

5 replies · opened May 24, 2017

TthatmattgardnerMay 24, 2017

Hoping to get some help here! Using a parallax header on our homepage but as it gets vertically too short the header content is cut off. I need to turn off the parallax effect and go to a normal scrolling header at around 550px screen height. See images attached, I'm hoping you can help me solve this as 550px isn't that short for a user to have their browser window. See attached, the first image is the smallest it looks okay, then in the second you can see that items start to overlap and that my buttons are cut off as when the user scrolls down they fade.

TthatmattgardnerMay 24, 2017

I'm wondering if there is something I can do in JS to turn off parallax or just a media query I can add to fix this at (max-height:550px)...

TthatmattgardnerMay 25, 2017

Anybody?

SSemicolon WebSTAFFMay 26, 2017

Hello,

Thank You so much for your Patience and we really apologize about the Inconveniences regarding this!

Is there any chance that you can provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Additionally, you can also consider removing the .slider-parallax Class from the #slider Tag.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

TthatmattgardnerMay 26, 2017

It's live now at http://routethis.com with the issue! Please help. I want the parallax effect for sure.

SSemicolon WebSTAFFMay 27, 2017

Hello,

Consider adding the following line of code in the js/functions.js File inside the sliderParallax: function() Function Block just after the if( $sliderParallaxEl.length < 1 ) { return true; } line: 

if( $window.height() < 600 ) {
	$sliderParallaxEl.find('.slider-parallax-inner').css({ 'position': 'relative' });
	return true;
}

This will disable the Slider Parallax on Viewport Heights below 600px. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard