Updated to 1.2.7 - cornerstone displaying incorrectly

Support
#1

Since I updated the other day to 1.2.7, Cornerstone is displaying my pages strangely, exaggerating gap elements much larger than they are and also putting random invisible gaps between elements for no reason. Please see the screenshot below:

#2

Hello There,

Thanks for posting in!

Since you have installed a caching plugin W3 Total Cache, please clear your plugin cache before testing your site especially after you have updated WordPress, the theme and the plugins. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

And since you are using CloudFlare, please login to your CloudFlare account and purge your site cache. For best results, please make sure that you are using the recommended CloudFlare settings which you can find from this link: https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/

Please let us know how it goes.

#3

Thank you, I have cleared W3 cache and Cloudflare, and pages are still loading like this in two different browsers.

#4

Hi There,

Would you mind reinstalling a fresh copy of PRO, It seems the content builder is not rendering the columns properly (https://prnt.sc/hklzp7), there might have been files that are corrupted on the update process.

You can download a fresh copy of PRO from the dashboard. You can follow the Manual X Update Via FTP guide provided here (It is about X and update but it can be applied on this case).

Better if you can purge and deactivate the caching plugin and CloudFlare while we tackle this issue.

Let us know how it goes,
Cheers!

#5

All caches cleared and disabled. Pro reinstalled per instructions. Problem still the same.

#6

Hi There,

I can replicate the issue on your and on my installation.

For some reason the gap does not seem to be disappearing on Cornerstone, but the hide based on screen width settings still work on the front end.

I will add this to our issue tracker so our development team can take a closer look.

Thank you for understading-

#7

So just deal with it for now and check back in after next update?

#8

Hi there,

I can confirm that this has been added in the issue tracker.

If you urgently need the issue fixed, you can use the v2 gap instead if the classic gap where the issue is present.

Thank you for your patience.

#9

So with the new version of the gap element… Can I put in a % value like I used to with the classic gap? Seems like the new gaps restrict to only px, em, rem?

#10

Hi there,

You can still use %, click the unit button and switch it to %. Please ignore the first size, the gap size should be the second option.

Thanks!

#11

The % value in a gap, classic or the new version, does not seem to have any effect anymore. I have to use another value otherwise it’s like there’s no gap there when I use %… also new to me in the latest update…

#12

Hey @threeoten,

I tested the classic Gap element in my dev site and the percentage value works.

If you use the percentage unit for the new V2 Gap element which uses the the height property and not margin like the Classic Gap, it will look like it is not working because by default, the container of the Gap element does not have a specific height. The container must have a height for it to work. See the screenshots below:

Below the column which is the container containing the Gap element has no specific height

Below the column has a height of 100px and the V2 Gap element is set to 84% and 84% of 100px is 84px

#13

I’m not sure I understand. Can you explain it in the context of using cornerstone to assign this column height value?

#14

Hi,

I tried percentage and it seems to work.

Please see video - https://www.screencast.com/t/3KnsN58ioHDx

One other option you have is to remove all gap elements and add the code below in the style field of your TWO adjacent columns

float:none;vertical-align:middle;display:inline-block;width:47%;

I created an example so you can see how that code works

http://www.quailsprings.org/xsupport-test/

Thanks

#15

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