Parallax effect slider

The parallax effect in the header slider does not work seem to work on chrome like it does on firefox.

Hello there,

Thank you for reporting.

I’m afraid that the issue doesn’t seem to happen on our demo site.

Could you confirm that you are using the latest version Chrome? What’s OS you are using?

Warmest regards,
Kharis

I think i know why.

I added this CSS to keep the image on the right, but it breaks the parallax effect.

#slideshow .slide-item {
background-position: top right !important;
}

Any hints to solve this?

Hello there,

I’m afraid that I can’t seem to replicate the issue on my end. It works fine on both Firefox and Chrome.

Could you confirm if your browsers are the latest version?

Other plugins’ script might be interfere it. Try to temporarily deactivate all non-required plugins on by one until you get it works fine. You might need to clear your browsers’ cache before reloading your page.

If it didn’t give any changes, could you please post your URL here so I can have a closer look? I thought it would be better for me to start debugging there.

One more thing… What’s OS you are using?

Warmest regards,
Kharis

I disabled all plugins execpt the recommended ones and siteorigin css plugin.
Problem still exists the css inplace.

It happens on both chrome and firefox latest versions

I’m using linux mint (ubuntu)

Hello,

the parallax effect can’t work if you set the background-position on top center with !important. It’s because the parallax works with a function that calculates the background-position while you scroll down.

What are you trying to do?

Best regards,
WeAreOne

I would like to keep the right side of the image in view on smaller mobile devices.
But it looks like the parallax effect is not working on mobile devices. So maybe i can give some @media screen and (max-width: 767px) to keep the right side in view on smaller devices and still have the parallax on larger screens.

Hello,

please try this code:

@media only screen and (max-width: 1024px) {
  .panel-row-style, .slides-container .slide-item {
    background-position: top right !important;
  }
}

You can also try center right !important.

Best regards,
WeAreOne

Thanks, that is fine.
I noticed that the title and button on the slide move a bit too much to the undersite of the slide on small screens. Can i move them up a little?

Try this to achieve the new position from your text:

@media only screen and (max-width: 1024px) {
  .text-slider-section {
    top: 50% !important;
  }
}

Choose the top percentage that works best for your issue.

I did not talk about the background. I include 2 images, when you decrease size of the screen text and button stay in the middle then suddenly it drops to the bottomside of the screen.

I didn’t ment the background too, that’s why I edited my last post today. When did you try the code?

I don’t know where it’s coming from, but you have in your style.css in line 3063 that the slider text section gets bottom 0 in tablet-view.

You need this to get it back to the middle again:

@media only screen and (max-width: 767px) {
  .text-slider-section {
    top: 50% !important;
  }
}

Please provide a link to your page next time, that’s easier for us to provide the right code. I got your site url through the image this time.

Best regards,
WeAreOne

This works fine, thank you.

As far as i know i have not changed the code of the style.css, so i think it is in the original file. Also because i have another test site and this one has the same behavior: http://optiek.sierink-wp.nl/

Great!
You know how to solve if for your other site?

As it might be the normal behaviour, the slider text section gets pushed out of the firt view because of the header behaviour since an update month ago, where the header gets static and can’t be fixed on top on mobile view any more I guess.

Yes, i van fix it myself now. Thanks for the support.