Different sizes for text (header and body) on Pro Layout

[readysteadygeek]

Hi there,

I’ve been using the new layout builder to create a ‘blog’ archive page, and will be using it for other Woo Commerce layouts soon too. However, to get the styling to match my other pages, I saved the ‘section’ that contains the bar at the top with the page title and search bar as well as basic page layout, and then loaded that template on the layout page.

However, while it is pulling in the design and looks OK at first glance, the size output for the column and the header text is smaller than on the standard pages the template was saved from. I’ve checked the font size settings in the builder and they are identical. However, when they output to either the preview in the builder or a front end page, the fonts are outputting at a different size.

You can see the difference between the below two pages:
https://staging3.rachel-ashcroft.co.uk/mindfulness-services/ - this is a standard page
https://staging3.rachel-ashcroft.co.uk/blog/ - This is a page using the layout builder, with identical settings but smaller output of font/sizing.

Are you able to investigate this for me to see what could be causing it as I’d like the sizing for the elements on layout pages to match the normal content pages.

Many thanks.

[ruenel]

Hello James,

Thanks for writing in! This issue could just be a caching issue. Do you have any caching or optimizing plugins?Please check out this troubleshooting article here and follow the instructions for the following sections (where appropriate):

Testing for Plugin Conflict
Theme Update
Child Theme
CSS/JS Customization
Disabling Cache
Disabling CDN

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[readysteadygeek]

Hi there,

There is a caching plugin on there, which is provided by my host, SiteGround. Most of it’s features are off except basic caching as it’s a staging site, but I have cleared the cache on both web and host side and it’s had no effect. I’ve also deactivated all plugins and the problem persists. I have no other optimisation, CDN or other settings I’m aware of that could cause this.

I’ve noticed while troubleshooting, it doesn’t just affect fonts, it seems that the behaviour and sizing of general rows and columns and elements also don’t seem to be consistent. An example of this is a persistent search bar I have in a header row on all my pages. It’s clearly not the same physical size on ‘layout’ pages as content pages.

Thinking it may be related to the way I used a ‘preset’ or ‘template’ section from a standard page on a layout page, I also tried rebuilding the elements from scratch on a layout page, and despite applying the same settings for font size and so on, there’s still a clear size difference in output on the preview or front end.

If it helps, I’ve created a couple more layouts now, including woo-commerce shop page (https://staging3.rachel-ashcroft.co.uk/shop/), and you’ll see again, vs standard content pages (such as https://staging3.rachel-ashcroft.co.uk/mindfulness-services/mindfulness-for-business/), the elements on the page are sized smaller than those on standard content pages, despite identical settings in the builder.

I’ve submitted the login details you requested in a secure note.

Many thanks

[tristup]

Hi James,

Unfortunately, the given credential does not work. Still, I am able to find the difference between the font size in these two pages, please find the screenshot.

If making the font size similar does not resolve the issue, please check the previously given credential and resend again.

Thanks

[readysteadygeek]

Hi there,

That’s the issue I’m having, the font size for the text/fonts and so on is identical on layout pages as content pages in the builder settings. But what’s outputting on the preview or frontend is different e.g. the ‘Header’ - Mindfulness for Business, outputs as 50.4px but the head on the blog layout page Rachel Ashcroft Blog, with the exact same settings in the background (font size 3em) it outputs as 42px.

This doesn’t happen when cloning or copying the same elements to other content pages, it only seems to happen when those same elements are output on a Layouts page.

I have also set the password as per the secure note above, so if you try again you should be able to access it now.

Many thanks!

[alexander]

Hi @readysteadygeek,

I’ve taken a look here and this is actually just an intentional subtle difference in how things work.

In Theme Options there’s a Content Font Size which it looks like you have set to 1.2rem. The content font size is applied via the entry-content class on all pages and posts by default. Layouts are to help you have full control over how the content inside is styled and this font size won’t be applied to the elements inside the Layout. By nature a Layout isn’t considered content since they let you build the structure around your Posts, Pages etc.

Try adding this CSS in the layout builder:

.x-layout-archive {
  font-size: 1.2rem;
}

That will let your layout match the same font size as the content.

[readysteadygeek]

Hi there,

Thanks very much for clarifying this. That makes perfect sense, and now I understand that I’ve applied that code to archive pages and a .x-layout-single font size to the CSS on single item layouts and it’s all displaying as expected.

Thanks very much for your help in getting this resolved.

Many thanks

[marc_a]

Hi James,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.