Donation Page doesn't display properly after update

[Huru]

Hi,

I just created a staging site on WP Engine so I can test out changes and updates. The production site is working fine, but has older versions of the X Theme and Cornerstone

However, on staging, the Donation page is not loading correctly. The page shows 1 of 2 sections. The top section shows but stops a couple hundred pixels down as does the scrollbar. The remaining portion shows as lime green.

I did not build this site and am not familiar with the theme or cornerstone. I have been able to edit other pages with the new version.

Presently, the staging site has

Cornerstone 3.0.4
X Theme 6.0.4
PHP 5.6

I deactivated all plugins to make sure there wasn’t any conflicts. I also saved permalinks and cleared cache.

In looking with Chrome dev tools, I do see a reference that I don’t see in the production site. Evidently as a new user, I can’t add another screenshot. I’m seeing a reference under the masthead that says [x_subscribe form =“308”]. I don’t see that on the production site.

Any idea what is going on?

Thanks in advance

[nabeel]

Hi there,

Thanks for writing around! It looks like your CSS customization in your Child Theme is conflicting with that page, please take a backup of your CSS first and remove all of your customization and see if this fixes the issue. Then review your CSS and remove the conflicting code.

Hope this helps!

[Huru]

Hi Nabeel,

I tried your suggestion by renaming the style.css in the Child Theme on staging to style2.css. Upon reloading, there was one change I could see, but the page is still not rendering correctly. If I could see all the content in Cornerstone, I might be able to do a better job of resolving the issue.

I also noticed that this page calls a very large renew.css file. If I replaced the newer renew.css file with the one from production, I could get a little bit closer, but the page is still broken. I think it comes down to 2 critical items

1. For some reason, a form short code is not rendering. (x-subscribe-form-308), which looks to add the email subscriber bar above the menus. It’s in the header area.

I think this may force ID “x-section-1” way later in the source code order. And I don’t see a x-section-3 like I do with production.

2. It looks like a layer isn’t positioning itself correctly.

For the life of me, I can’t figure out where that form is called from on the Cornerstone page builder. And if I look at the tool, I see a Section 4 and a Section 1. But I can’t see the specific contents.

I’ve gone ahead and created an account for you. I’ll put it in the secure note.

[paul.r]

Hi,

1. The shortcode is not rendering because email forms plugin is deactivated.

2. Try to re-create your page again, adding the elements bits by bits and checking preview each time. That way you will know what is causing the issue.

Thanks

[Huru]

Hi Paul,

no, the issue still remains. You’re correct about the plug-in being deactivated. I had deactivated them to test if there were conflicts. I forgot to turn that one back on.

But the original issue still shows.

As an aside, I think I have this topic marked as “Watching”, but I never get an emails indicating updates. Should I?

[Alaa]

Hi Huru,

I’m not sure what exactly is causing this issue on that page, but I’ve saved this page as a template as in this screenshot:

Then, I’ve loaded the same template “test” on another page, and I can see it’s working fine (the link is in the secure note below) so, if you agree this is the correct template, could you please load it over the donate page? or even create a new page with this template?

Thanks.

[Huru]

Hi Alaa,

Sorry for my delay. Your “test” page does solve the issue of the page not loading full screen. However, the top area should be transparent so the image shows. Instead, I’m seeing white.

When I try to step through the CSS, it looks fine per se. I do see an extra

element with ID=“x-root” that the production one doesn’t have. But, I don’t see anything in the CSS that would overwrite.

Thanks,
Anne

[paul.r]

Hi Anne,

To show image on top, you can add the code below in Cornerstone > CSS

.masthead {
    position: absolute;
    width: 100%;
}

If that works, you may delete your old donation page and change the title and slug of this page to donate.

Thanks

[Huru]

Hi Paul,

thanks. That code worked.

I don’t know if this helps you guys or not, but I did find an issue and possible resolution. Keep in mind, I don’t know this framework yet. Bottom line is I spotted this same issue on 2 other pages.

I also noticed if I removed the body CSS classes, I could get the page to render so I could see the content.

Now, I’ll go look at see if I can find actual CSS with that name. Till then the pages look to be OK. Slight difference in fonts but that has to do Typekit and domain names.

[ruenel]

Hello There,

The pages that has some issues were because of your custom css. In your child theme’s style.css, you have added this:

.impact .x-main.full, .whoweare .x-main.full,  .whatwedo .x-main.full, .donate .x-main.full {
    float: none !important;
    display: block !important;
    width: 100% !important;
    position: absolute !important;
    top: 0px !important;
}

I am not sure why you added this. I am curious of how your page should look like which is why you may have added the code. If you can give us further clarifications or maybe some screenshots, then we will have the idea of what you have in mind.

Hope this helps. Kindly let us know.

[Huru]

Hi,

I wish I could tell you why someone added it. I guess they thought it was !important;-)

[christian]

No worries.