To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Dawn theme: adjust line spacing?

mactac
Excursionist
41 0 15

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 10 (10)
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
Excursionist
41 0 15

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
1279 159 204

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
Excursionist
41 0 15

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
Excursionist
41 0 15

Bump....

mactac
Excursionist
41 0 15

Anyone?

mactac
Excursionist
41 0 15

bump....

Aeterius
Excursionist
13 0 5

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. 

Aeterius
Excursionist
13 0 5

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
5 0 1

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?