Cornerstone preview shows small gap in Raw Content element that contains SVG code

[boomfly]

My normal procedure for SVG code is to place it inside a Raw Content element and then wrap that around a Div element. Then I can control the styling on the Div element and I set the following:

This has always worked and works perfectly on the front-end but I’ve noticed in the CS preview there is a small area of space inside the Raw Content element boundary just below the SVG graphic. This gap is pushing the graphic up slightly and makes it look like there’s padding or margin enabled somewhere - which there is not!

On the front-end it renders it perfectly and you can see there isn’t any space when you inspect the element and the graphic aligns as expected.

What’s going on here? Could this be a bug in the CS preview?

[Ismael]

Hello @boomfly,

Thank you for the inquiry.

We may need to inspect the site to properly understand the issue. Please create a test page, then provide the login details in the secure note.

Best regards,
Themeco

[boomfly]

Hi @Ismael,

I’ve created a Test Page for you to look at. Login credentials in the secure note.

Thanks

[Ismael]

This seems to be an issue with the default line-height property of the body tag from the themes/pro/framework/dist/css/site/stacks/renew.css?ver=6.6.6 file.

body {
    line-height: 1.8;
}

Setting the value to 10px or lower should fix the issue.

We’ll forward the issue to our channel.

[boomfly]

Thanks for investigating. Is this relative to the stack then? If I change to the Starter stack will the issue still occur? Also what are the implications of changing the line-height on the body tag? Will this mean other elements are affected by using this code? Remember, the issue was only “seen” in the preview not on the front-end.

[Ismael]

Yes, it’s related to the active stack. For now, we added this code to the Custom Code > Global CSS field so it only affects the CS preview.

.tco-ui-theme-dark body, .tco-ui-theme-light body {
     line-height: 10px;
}

Let us know if you notice anything else.

[boomfly]

Thanks for the updated code. Unfortunately this conflicts with the line-height in the Wordpress body content. See screenshot below where you can see body text has incorrect line-height in The Content element.

[prakash_s]

Hello @boomfly,

I checked your site, it seems that the page builder preview is working fine on my end. Please have a look at the given screenshot below.

I have tested it on the Google Chrome browser version 136.0.7103.115. Please ensure that you have not installed any browser extension that is stopping any JS/CSS file from loading.

Thanks

[boomfly]

Hi @prakash_s
Yes I’ve added some CSS in the Single Layout CSS to counteract the issue. The problem is that without my extra CSS, your CSS messes up the body line-height globally and doesn’t target the gap issue specifically on the SVG.

[christian]

Hey @boomfly,

In that case, please continue using your custom CSS temporarily while there is no solution in our theme yet. Please stay tuned for updates.

Thanks.