After Latest Update, All line height CSS on elements are broken and other stuff

After I performed today’s Update, All line height CSS on elements are broken, as well as other elements vertical spacing is now jacked up. See images uploaded (just one example of a simple text line that had line height applied to it in CSS directly in the style box on it in Cornerstone, that looked perfect before and now is smashed up against the element above it). I’m hosting on WPENGINE so I IMMEDIATELY reverted to the previous theme version and version Cornerstone. No harm done… but now I’m sitting on the updates getting nervous (I don’t like NOT updating to the next iteration of the developer theme - it’s always a support and security issue to do that)…

Anyone else experiencing this? If not, can support weight in on this? What’s the story?

Our site: http://fit.farm
We’re running Integrity (I believe) with a Child Theme installed (so I was surprised that this happened)… ???

Ouch. :frowning:

Hey @giveitlegs,

Being on WP Engine would you mind moving the site to staging, then running the update so we can see it live? We’ve not seen this issue before, so having a look at what’s happening on your site specifically will help us get an idea of what’s going on. Thanks!

Sure thing. Added it staging. Check out this URL: http://gofitfarm.staging.wpengine.com/

Uploading several photos of instances of this happening, right on the homepage (it affects every page on the site though)…

Update - okay, apparently I can only put one image per post now on this support forum - irritating… :frowning:

So I guess I’ll screenpresso these other two and give you the links here.

LINKS TO NEXT TWO PICS

https://screenpresso.com/=XIe8g
https://screenpresso.com/=xxlJd

Thnx for having a look.

Cheers.

Regarding your first screenshot, it’s because of your inline CSS and not caused by X. Please remove them.

To your second screenshot, the new version of X now removes the bottom margin for last paragraphs. You have an empty <p></p> tag under your custom overlay code. It’s either an HTML or a shortcode you placed in the Text element and most probably, you have a new line space after your HTML or shortcode. WordPress automatically adds empty p tags if you do that. Remove new line spaces after you insert an HTML code or a shortcode. This applies the same for your START A NEW HABIT TODAY section. Since this text in the screenshot is the only paragraph inside the Text element it’s also the last so it doesn’t have a bottom margin now in the new version. You need to add either a bottom padding or margin to your row now and this is the correct setup ever since.

The same applies to this image. Add a Gap element with a size of 50px to fix it.

Thanks.

So basically, you’re telling me I have to go page by page for hundreds of pages and do this for each page. Great. (sarcastic) Honestly, I understand the technical reason, but the fact remains that we HAD to add spacing before in the old version to get things looking like what we wanted to. NOW, in the new update, something has happened that does NOT respect the end result of the UI that we manufactured so carefully, page by page. It’s incredibly irritating… :frowning:

Why did this change have to occur? Was it co critical to hard code something in that would cause the new theme/cornerstone to now NOT respect these lines of empty paragraph tags? It has really jacked us…

Also, here’s a screenshot of one of these elements… I don’t see us having forcibly put any:

  • shortcode
  • new empty line

All we have is CSS applied in the style box on a , both margin-to- and margin-bottom… so I’m not sure your analysis is correct here.

See image upload… this upload is from the old site (without applying the updates)

Hello, I have the same issue… Fortunatelly on my testing site:
Homepage titles now sit on each other (main one on top and down the page on Newsletter section): http://test1.hornet.pl
The problem is that in the page builder everything looks fine, so no idea hot fix it.

I also would like to update my main site, but it’s a scarry thing to do…

beata

1 Like

Hello @giveitlegs and @tashitendrel,

I wanted to jump in here and let you know that this should be fixed in an upcoming release to fix some of these issues that were not caught in the rounds of beta testing.

What happened relates to the development of our v2 Text Element for Pro. Many of our elements that we launched Pro’s header and footer builders with were developed completely from scratch, so they did not have any legacy code that needed attention. As we are entering this phase of mapping in new elements such as the new Text Element, in certain situations we will reuse an old class name if the old base styling is not too invasive and can be reused for these new modules.

With the Classic Text element, the wrapping div for this always utilized the class name x-text. Because this is a fairly general-purpose class name and the original static styling for it was not too intrusive, we opted to utilize it for our v2 Text Element, as the generated styles would be siloed to that element, and wouldn’t affect the Classic Text Element.

One change we did end up making though that has inadvertently affected people using the Classic Text Element is we opted to ensure that the :first-child of the v2 Text element always has margin-top: 0; and the :last-child always has margin-bottom: 0; which is necessary to ensure that there isn’t any extra spacing coming from something internal to the element. This is necessary since you can space things much easier with v2 elements and it sandboxes that Element much more effectively.

The styles mentioned above were added to the theme’s static stylesheet, and is currently being applied to all .x-text elements, both Classic and v2. This was a miscalculation on our part that we simply didn’t catch in our beta testing both internally or with other customers. There are so many permutations to consider for how a user will utilize various elements in so many ways, that we simply didn’t catch it.

We apologize for the issues this has caused, but rest assured that you shouldn’t have to change anything and that the next point release coming out soon should fix this issue.

Once the release is out and you have updated, please respond back here to let me know that this has been taken care of. If you find that you’re still experiencing issues, I’ll make sure to look into it personally and we get it resolved for you.

Thank you for your understanding at this time and we look forward to getting that release out to you all soon!

Thank you, Cory, for this reply. Since my problem occured on the development site, I can easily wait and run the next update to see if those headers and spaces look better. And I will write down here.

What is really strange to me – the XPro preview is showing the whole page correctly. Heights crush only on the front end. Preview doesnt show the look of the website. Because of that it is practically impossible to solve those issues manually by adding paddings and such, because on the back end I dont see any problems…

thank you,
beata

Thank you Corey for the update! We will hold off on applying the updates until the next release as well. Many thanks for chiming in on this one.

Cheers! :wink:

Thank you. It looks all fine after 1.2.1. update.

Glad to hear that, @tashitendrel! Thanks for writing back to confirm all is well.

I must admit that I am pleased you are fixing the padding and margin issues with content blocks - and the elements that go in them. Not having to continually use CSS to fix silly padding and margin issues with images (and the like) is a very good thing. In many cases it was trial and error to put the CSS in the right places - should it go in the element, contact block, column, row, section, page or global…

One big issue, though, is the need for more streamlined overview and control of all the settings within elements - ie the base font sizing and color use to work across the whole website, but now it seems we need to change EVERY text element.

@Innovatek our next major release will be the introduction of a template manager. It will allow you to save your own element presets, so once you design something you like in one place you’ll be able to re-use it on any other pages (and headers/footers in Pro). This will help streamline things like you’re describing. We’ve also discussed the possibility of assigning a preset to be the default state when new elements are added to the page.

still not fixed

This is broken again in Pro 2.4.0

@neilr2096

Would you mind being more specific on these? I see you’ve replied to specific posts from Kory and myself but I’m not sure what exactly you’re reporting as broken? If this is related to the other report you made about line height, I can confirm here as well that issue will be fixed in the next update.