Live View different than editor

The page looks great on the editor side but when I go to website on any device the indents aren’t showing.

Please provide a screenshot of what you see in the editor. Please make sure the screenshot includes the URL in the address bar, and also any spot or block that’s not getting styled properly on the public site. (Kindly upload here https://snipboard.io/ and paste the URL in your response.)

You have multiple “editors” on your site, and I want to have an idea of which tool should be styling the page but isn’t working.

Standing by.

https://snipboard.io/ZjW9kr.jpg

Editor view which is what I want.

https://snipboard.io/Sh7nBd.jpg

Live View which is not the same

I’m using Buildz Pro theme. I downloaded Elementor yesterday when I was trying to figure out what was happening. I deleted all the unused themes and plugins are all updated. I also cleared the cache.

Sorry for my late reply. Life got in the way ??

The problem seems to be coming from the Buildz theme. I installed the free version of the theme on a fresh WordPress site just to test and understand what’s going on… and I experienced a similar problem.

The “nice” design you see in the editor is provided by the WordPress blocks, but the theme’s design takes over on the live page and the result is what you see there.

And the cause of this is the theme has specified a fixed line height of 20px. This is OK when using the theme’s default tiny font size of 14px for articles. But this becomes problematic when you use a larger font size, like the 22px you’re using.

What the developer should have done was to use a relative unit for the line height, say 1.4 or 140%. This way, the line height would automatically adjust for any font size specified.

I can also see you’re repeatedly setting font sizes to 22px and text colour to #275128 in various blocks’ settings in the WordPress editor. This can become laborious quickly, introduce inconsistencies, and become a headache to track and make changes over time.

As you’re using the paid PRO version of the theme, kindly check the theme settings to see if there are options to easily customize the line height, font size and text color centrally.

If there are no such options even in the paid PRO version of the theme, then simply add the following custom CSS in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS:

article p, article ol li, article ul li {
line-height: 1.5;
font-size: 22px;
color: #275128;
}

Doing this (either from the theme’s settings or with the custom CSS code) will set new default values for these design properties… but you can still override them on individual blocks in the WordPress editor.

Please try the above and let me know how it goes. And feel free to ask for any further design enhancements you may desire.

Good luck!