Parallax Images

Support
#1

My parallax images are not displaying properly on mobile. I am using a plugin and visual bakery. You can see it here http://www.cherylbenard.com/arch/home/make-a-difference/. You have to use a real mobile device as the sizing tool in x-pro doesn’t show the problem. Thank you.

#2

Hi @kcostellomak,

Thanks for reaching out.

In our builder, parallax is disabled for mobile due to performance issue and it doesn’t work the same on desktop (fixed background). And with Visual Bakery and Cornerstone integration, parallax is still disabled for mobile.

In your case, it’s between Visual Bakery and your plugin Adamrob Parallax Scroll, I recommend contacting the plugin author and see if you have other options to disable it for mobile.

Thanks!

#3

Thank you @Rad. I found the setting to disable it on mobile. There a resize on mobile option but it wasn’t working–a known issue which the plugin developer has yet to address.

If I were to put these in cornerstone, is there a way to resize on mobile? That is what I really want.

#4

Hello @kcostellomak,

There is no option in the element settings to resize the image in mobile. You may have to add an inline css in the section’s element css in the Customize tab.

And then you can add this:

@media(max-width: 767px){
  $el .x-bg .x-bg-layer-lower-image,
  $el .x-bg .x-bg-layer-upper-image {
    background-size: 100%;
  }
}

For more details about the background-size property, please check this out:

#5

Awesome!! Thank you!

#6

You’re most welcome, @kcostellomak. Have a great day, and we’ll be on hand if there’s anything else you need assistance with.

#7

That css is causing erros. And also wouldn’t the 100% mean that it is not resizing? I put it my global css so it would apply to all. Should I attach it directly to the individual section in cornerstone?

#8

Hi @kcostellomak,

That kind of CSS is only applicable to Element CSS due to $el. That means this element. If you’re now using cornerstone’s parallax option then please check this https://theme.co/apex/forum/t/problems-in-mobile-devices-version/64639/2

And that CSS should be added to Theme Options > CSS.

Thanks!

#9

I’ll add that to my bag of tricks. On these pages however I am using visual bakery.

#10

Great!
If you need anything else we can help you with, don’t hesitate to open another thread.

1 Like
#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.