Responsive parallax workaround

[wolfl]

By looking through the forum tickets I’ve learned that the parallax SPB element is not compatible with mobile (smaller viewports). I wasn’t aware of that before I designed a section of our site, so now I need to find a workaround to make the section function well on small screens. I’m aware that it can’t really “work” because parallax scrolling is not a brilliant UX on touch screens anyway.

So… is there a roadmap for making parallax ‘work’ when the responsive behaviour is switched on, or for the theme to change the parallax elements to static ones when a certain breakpoint is activated? Or is there a standard workaround for this issue that we can implement via custom CSS or JS without creating a whole different template for small screens?

Any help would be much appreciated – and I think it would be good to highlight this slight shortcoming in the documentation. I only found out by trial and error.

[Swift Ideas – Ed]

Hi @wolfl

What are you experiencing with the parallax row on mobile at the moment? The image should still display, but without movement.

– Ed

[wolfl]

Thanks, Ed.

I checked again and now realise that it’s not strictly speaking the parallax movement that’s the problem, but the styling of the content inside the SPB parallax elements. The text blocks just get squashed and some of the content gets hidden underneath the layers of parallax elements (see screenshot).

So I suppose I need a solution to make the content inside the parallax layer better formatted when the screen width breakpoints are activated. Does that make sense?

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Can you drop us a direct link to that page to check the issue for ourselves?

Thanks,

– Ed

[wolfl]

This reply has been marked as private.

[David Martin – Support]

Hi,

If you add this to Theme Options => Custom CSS, it can be used to adjust those sections on that exact page only.

@media only screen and (max-width: 767px) {
.page-id-790 .spb_parallax_asset.parallax-window-height[data-v-center="true"]>.spb_content_wrapper {
    padding: 5% 10% 10%!important;
    margin-top: 0!important;
}
}

It will result in this: