Parallax looks perfect on back end, but no parallax on live site

Hello! I somehow created a lovely back end of my homepage through much trial and error! I really won’t want to mess it up! Screencast here:

https://screencast-o-matic.com/watch/cY1QYxCIhj

However, when I look at the LIVE site on the latest Chrome, there is no parallax effect.

https://screencast-o-matic.com/watch/cY1QY4CIhx

Please read:

  • I cleared the cache, do it regularly throughout development.

  • Browser details: https://www.whatsmybrowser.org/b/UXYWV

  • I don’t know if it’s an issue to do with having TWO parallax areas on the homepage?

  • I used this CSS for the images:
    .x-bg-layer-lower-image {background-attachment:fixed;}
    And a min-height:500px
    EDIT: Changed to .x-section [class^=“x-bg”][data-x-params*=“parallax”] {
    background-attachment: fixed;
    }
    after I read a recent help post.

  • I followed ALL the instructions and tutorials I could find anything recent online, and in your docs it didn’t help as there was not much detail.

  • Not using a child theme (by the time I realized, it was too late as had already worked a lot on the site, Oops).

It would be nice to know what I’m doing wrong.

The site is still under construction, so please use the log in after viewing the screenshots, if it’s not obvious what the problem is.

I would rather not risk undoing my work which was hard to do, but want to know what’s going wrong here, if possible. Thanks!

Hey @beastlocal,

Please remove the CSS you’ve added and check if the issue persists. Checking for custom code conflicts is one of the basic troubleshooting mentioned in our Common Issues article so I believe you missed that. Please always ALL the troubleshooting steps to know if it’s really our theme that’s causing the issue.

Also, please note that we do not provide support for custom codes. What you see here in the forum serves only as a guide to help users get started if they wish to use CSS. If you’re going to use CSS, it’s best that you learn CSS so you know why some CSS codes cause issues.

You do not need custom CSS to enable parallax in Cornerstone. Just enable Advanced Mode and you’ll have Section Parallax options.

image

Hope that helps.

OK, Great! Done!

It’s a subtle parallax effect but fine for my purposes. I originally wanted to have the background stay totally fixed during the scroll, hence the CSS, but I understand it’s not a custom build, so the theme has limits and I’m no coder anyway.

Thanks for the help @christian - have a good one!

Glad that we could be of help.

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