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

Support
#1

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:

Screenshot 2025-05-23 at 11.20.31
Screenshot 2025-05-23 at 11.20.31644×1602 52.7 KB

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!

Screenshot 2025-05-23 at 11.13.23
Screenshot 2025-05-23 at 11.13.231534×384 54.2 KB

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.

Screenshot 2025-05-23 at 11.12.41
Screenshot 2025-05-23 at 11.12.411540×262 34.8 KB

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

#2

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.

secure-note
secure-note1040×250 15.3 KB

Best regards,
Themeco

#3

Hi @Ismael,

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

Thanks

#4

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.

#5

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.

#6

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.