As you can see on this product page the space around the text on ‘Sizes’ (Rich Text metafeild) is larger than ‘Care Instructions’ (Multi-line text): Black Melamine Rectangular Bowl – Cheffings
Baring in mind that both are different types of product metafields, what should I do?
Hi @lukafernada
You have a few options to make the spacing consistent:
CSS override (recommended)
Target the collapsible row content and adjust margin/padding for Rich Text fields to match Multi-line text.
Example (in your theme’s CSS or Custom CSS section):
/* Make Rich Text collapsible content spacing match Multi-line text */
.collapsible-row .rte {
margin: 0;
padding: 0;
}
You might need to inspect the element in Chrome DevTools to confirm the exact class used (.rte is common for Rich Text).
Switch metafield type
If possible, change the “Size” metafield from Rich Text to Multi-line text.
This will make Shopify automatically apply the same spacing as “Care Instructions.”
Custom Liquid adjustment
<div> with a class and style it to match the Multi-line text spacing.
Quick tip: Usually, the easiest is CSS override you don’t have to change metafields and it keeps the spacing consistent across the store.
Could you inspect and help me find the correct class, all the ones I’m trying don’t seem to work
Provide your store URL
it’s Cheffings.net . and the product page is Black Melamine Rectangular Bowl – Cheffings . Thanks!
Hello @lukafernada
Please add this code into the Theme settings > Custom CSS
.metafield-rich_text_field > *:first-child {
margin-top: 0;
}
.metafield-rich_text_field h6{
margin-bottom: 1rem;
}
Wow, thank you very much
Happy to help @lukafernada
