Hi,
I need to increase the spacing between lines within a section of the theme editor called: “Image with Text”.
The lines are too close together which affects the legibility. I’m a little familiar with custom code but am not sure where to go to modify that OR what code I need to use to create more spacing.
Can anyone make a suggestion? I’ve attached screenshots of the Theme Editor and of the Liquid I found…
Thanks in advance!
Daniel
1 Like
hi @MAGNUS_Canis_Co
You need to add line height css code on that. Would you mind to share your Store URL website? with password if its unpublish. Thanks!
In your custom CSS add this code:
h3 {
line-height: 2;
}
1 Like
Thank you for this. That worked for adding more spacing between the H3 Header and the Paragraph.
For more spacing between the lines within the paragraph, what should I do?
This?
paragraph {
line-height: 2;
}
To add more vertical space between the h3 and the paragraph you can use this:
h3 {
margin-bottom: 20px;
}
1 Like
Pretty sure that’s not permitted here. But thanks!
Fantastic. That didn’t seem to work.
I actually used your code suggestion plus this one for one of those sections and it created the space between the paragraph lines I needed.
h3 {
line-height: 2;
}
p {
line-height: 1.5;
}
Sorry for all the questions, but any ideas on creating padding between the bottom of paragraph and the button? I’m a quick learner but still new to the custom CCS.
If the margin-bottom did not work for you, it may be because there are other classes influencing the code that are affecting that parameter. To make sure you can add !important at the end of the style.
h3 {
margin-bottom: 60px !important;
}
To create space at the top of the button you can add the following code:
.button {
margin-top: 90px;
}
Remember to add !important only if necessary and if your code has no effect. In this case it should work without problems as shown above.
CSS is relatively simple. Every day we learn something new!