Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How can I reduce line spacing in the Dawn theme?

mactac
Explorer
51 0 17

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%?

 

Replies 13 (13)

cateb
Shopify Partner
13 2 4

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.

mactac
Explorer
51 0 17

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

Denishamakwana
Shopify Partner
1408 173 232

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
mactac
Explorer
51 0 17

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

 

mactac
Explorer
51 0 17

Bump....

mactac
Explorer
51 0 17

Anyone?

mactac
Explorer
51 0 17

bump....

Julia777
Excursionist
16 0 11

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. 

ces1987
Visitor
1 0 0

Thank you!!!

Julia777
Excursionist
16 0 11

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!

CP6
Tourist
8 0 5

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?

abelarts
Tourist
9 1 2

yeah, same issue here. It's super annoying and makes no sense why you can't space out paragraphs.

 

johnsonjasonb
Visitor
2 0 1

I added this code and played with the numbers. No matter what number I plugged in, it didn't seem to make a difference.