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
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.
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?
User | RANK |
---|---|
182 | |
155 | |
72 | |
35 | |
34 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023