Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
So the issue I am having is that I have parallex rows on my site (crossfithollywood.com) and it seems to work great until about halfway down the page something is off and they stop showing correctly. However, if I adjust my browser window size, even just a hair, they work perfectly. What is going on and is this something I can easily fix?
Hi Rex
Thanks for reaching out.
Is the parallax functionality provided by the theme and Page Builder? I can see some parallax related code in the page that doesn’t look like ours.
All the parallax row backgrounds seem to work normally for me, is there a specific row that the issue beings on your end?
I assume some of the parallex code may be from the very top CTA (theme). Everything else should be Page Builder. They seem to work until after the Workout of the Day section. The CHECK OUT OUR PRICING OPTIONS row should have it and WE’RE SOCIAL! should have it as well. If you resize the window they show up great, however, if you refresh the page they are off again. It seems as though it is because they come after rows that are resized due to widgets loading. As long as they are before rows like WORKOUT OF THE DAY (WOD), TODAY’S CLASS SCHEDULE, NEVER DONE CROSSFIT?, and WANT TO TRY US OUT?. If I move the rows above those then they work great. I hope this makes sense.
Thanks, I can see the issue. Check to see if a working baseline is available. Clear the Endurance Cache plugin and then temporarily deactivate all plugins except for those authored by SiteOrigin, in that state, does the issue resolve?
If I move the parallex rows above the rows WORKOUT OF THE DAY (WOD), TODAY’S CLASS SCHEDULE, NEVER DONE CROSSFIT?, and “WANT TO TRY US OUT?” then they work great. Those rows resize after the page loads based on the content that is available, so I believe when that happens, it puts the alignment off on the parallex rows below it because sometimes I just see part of a photo or the photo from another parallex row. Then when the window size is adjusted the alignment fixes itself. Is there a way to set a widget area in the row to a fixed height, so that the row size will not be adjusted when the content loads? I think that would solve my issue.
I don’t have a plugin “Endurance Cache”
When editing a row or widget you’ll find an Attributes section on the right. In the CSS Styles field you can set a min-height: https://www.w3schools.com/cssref/pr_dim_min-height.asp.
min-height: 600px(Caching might be added at a hosting level. Sometimes hosts will put a clear cache link in your top toolbar. If you don’t have a caching plugin installed you might see it at PluginsDrop-ins. If you view your page source and search for “cache”, you’ll see the note left by Endurance Cache. Bluehost, for example, use this caching application.)
okay, I found it in Settings > General it is off and cleared. I also disabled all the plugins
I refreshed the website and they still are still not correct until I adjust the window size.
Thanks for checking for a baseline.
It’s unrelated but you have some images served via
http, you might want to try https://wordpress.org/plugins/really-simple-ssl/. It’s a quick way to resolve that and ensure everything is served viahttps. Here is how to check those notices if you’re interested https://wordpress.org/support/article/using-your-browser-to-diagnose-javascript-errors/#step-3-diagnosis.If you’d like, we can test the layout locally. In Page Builder click LayoutsImport/ExportDownload Layout. Upload the JSON file to WeTransfer.com or similar and send us the link. I’ll try testing the layout locally tomorrow and see if I can recreate the issue.
I have that plug-in I just disabled it. I can defiantly do that for you. How should I send the link to you?
Thanks. Please, upload the JSON file to WeTransfer.com or a similar cloud site and send us the link.
here you go https://we.tl/t-EjtvAxtR2E
Thanks for the layout.
It appears the background image and parallax effect is managed by the theme. The markup for the background is inserted by the theme. If I import the layout into SiteOrigin Corp, the markup and container for the parallax effect aren’t present.
Page Builder provides the functionality for themes and plugins to do this, to insert content before and after various containers.
Here is a quick comparison of the markup:
https://siteorigin.com/wp-content/uploads/2020/04/corp.png
https://siteorigin.com/wp-content/uploads/2020/04/social-2.png
Please, can you reach out to theme support for a hand? If the issue lies in a feature that we have control over, we here to help. In this case, it looks like the feature in question is being managed by the theme.
will do, thank you
Thanks. Please, let us know how it goes.
Dealing with them was a nightmare! First, they wanted me to buy the theme update so they could “support” me because my theme was out of date, even though it was not a support issue but a bug issue.
That did not fix it.
Then they asked me to create them a login so they could check some settings.
Then after about an hour they messaged me and said it was fixed.
What they did not tell me is that they added Additional CSS that just disabled parallex and told me it was fixed.
After looking and realizing something was off I figured out what they had done! I told them I want a refund and I want back to my old verson of the theme.
So long story short, I started doing some more research about how to do what I was trying to do by making widgets a set size. Finally I figured it out. I just had to add:
CSS Styles:
height: 500px;
overflow: scroll;
Mobile CSS Styles:
height: 100%;
Now when my widgets load they do not adjust, so the alignment stays!
Thanks for your help and for trying.
I’m sorry to hear that wasn’t a better experience. Thanks for the update. I’m really glad to hear you’ve made progress.
If SiteOrigin questions arise in the future, please, let us know.
All the best with your website!