Website Issues (Rev Slider + Parallax + Portfolio Items)

Hello, I was recently having a Javascript issue that has now been resolved. However, as we went through the process of fixing it, I’ve noticed a few other issues pop up (possibly as a result of our troubleshooting).

The first issue is that the main revolution slider on my blog page is no longer working (see image #1).

The second issue is that my portfolio items are no longer centered (see image #2). However, when I’m viewing the portfolio items with my ‘theme options’ opened, all of a sudden it’s centered again (see image #3).

And the third issue is that all my parallaxes no longer seem to work on mobile devices (see image #4)

I tried to solve the issues myself but I couldn’t figure it out.

Thanks a lot for all your help

Image #1
Imgur

Image #2
Imgur

Image #3
Imgur

Image #4
Imgur

Hi Eric,

It could be caused by some JS issues. When you can, please provide us with the admin access to your site in a Secure Note:

To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Thanks Jade. Here you go!

Hey Eric,

Thank you for providing the credentials.

  • There was a JS error generated by the Rev Slider plugin. I went ahead and turned on the “Include Libraries Globally” option via Slider Revolution > Global Settings

This has fixed the slider issue on your blog page.

  • There is a custom CSS added which is restricting the width of Portfolio items, please find and remove the following code:

image

  • Upon checking your homepage, I see you’re using classic sections, please note that the parallax is disabled for mobile devices when using classic sections. You can use the new v2 sections to make parallax work in mobile devices.

Hope this helps!

Hey Nabeel, issue #1 & 2 are now solved, so thank you very much. I was just wondering, is there a way to change a section from classic to v2 without having to redo everything? My entire website is comprised of classic sections, so it’s less than ideal if I have to redo the entire design with the v2 sections.

If you have any tricks or workarounds, it would be greatly appreciated.

Thanks again

Hello Eric,

Because the v2 elements have different structure from the classic elements, regretfully we do not have a way to convert those sections to the new one. You will have to recreate the sections from scratch instead.

Best Regards.

Just out of curiosity, is there a code that I could add that would allow classic element parallaxes to work on mobile (like they did in the past)?

And if not, is there a way to disable the parallaxes on mobile?

Hey Eric,

The parallax background in the section uses the background-attachment, background-position and background-size property. You can modify these properties to disable the parallax effect in smaller screen. You may use this sample code:

@media (max-width: 979px){
    .x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
        background-size: cover !important;
        background-position: center;
        background-attachment: unset;
    }    
}

Please keep in mind that this is an example code. We do not maintain these codes as it may change in the future or create conflicts with other elements. Feel free to experiment with the code to know what works best for your site needs.

The CSS selector used in the code above is found by using Google Chrome Developer Toolbar to check the live HTML code. To learn more about those CSS properties, please check this out:

Thank you for your understanding.

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