Shopify themes, liquid, logos, and UX
I find that the line spacing for content (ie the space between each line of just regular text) is just a little bit too large - it almost seems doubled spaced. How do I reduce the line spacing by maybe 20%?
Theme -> Actions -> Edit Code -> base.css
search for line-height
edit as desired
I would probably just lower the decimal number in the calculation first to find what looks best.
I found this:
.text-body {
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 10.8 / var(--font-body-scale));
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}
but if I make changes (editing the 0.8 part) it doesn't seem to make any difference at all to the text
Welcome to shopify community.
Please share your store URL and if your store is password protected then please provide password too.
Thank you.
I don't have th emodified store live yet, but this is a share of the preview, good for 2 days:
https://8rorhjdqk1vtgxmf-17245213.shopifypreview.com
Bump....
Anyone?
bump....
Hey! I just found a solution with the inspector that worked for me. I was trying to adjust the line spacing of a specific section of image with text.
Try the following codes at the bottom of your base.css file
Line spacing for image with text sections:
div.image-with-text__text.rte.body {
line-height: calc( 1.5 / var(--font-body-scale));
}
Play with the 1.5 number until you get it right.
To adjust the other sections, go to your website and select the text area you wish to adjust. Right click to open inspector and hover to find the class code. In the above example, the class code is
''div.image-with-text__text.rte.body.'' Hover to make sure you get the right code.
You can then use the above template and change the class code to edit other areas, such as image-with-text areas or whatever layout you have.
Thank you!!!
Here's the code to edit the body text line spacing across the whole website
Edit theme -> edit code -> paste the following code at the bottom of the base.css file
body {
line-height: calc( 1.5 / var(--font-body-scale));
}
change 1.5 to the number you prefer
Hope this helps!
I have a similar question about spacing between paragraphs. For example, in the multicolumn section, if there's more than one paragraph of text, it's hard to tell there is actually a second paragraph, making the text look very dense. Any suggestions?
yeah, same issue here. It's super annoying and makes no sense why you can't space out paragraphs.
I added this code and played with the numbers. No matter what number I plugged in, it didn't seem to make a difference.
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024