SOLVED Set line height h1-h6 independent from body element
-
-
- Gerard Prins
- Newbie
- Posts: 13
- Thanks: 0
-
Sorry about the newbie question.
As usual, the line hight of all text in a template is defined in the body element in CSS. Although I know how to modify this to my liking in standard CSS, I have great dificulty finding out where to apply "line-height" to the h1 to h6 elements in Gantry 5 and the Hydrogen template.
In my template the body element defines line-height: 1.5; however, this results in exaggerated line spacing on all headlines, something I would like to modify.
Can anyone please help me? - Last Edit: 8 years 9 months ago by Gerard Prins.
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
You add this code:
h1, h2, h3, h4, h5 { line-height: 1rem; }
1rem is basically 16px
or just for oneh1 { line-height: 1rem; }
To add custom style sheet to Gantry 5 Framework please follow these instructions:
docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
or if you want to add them in the Page Settings:
docs.gantry.org/gantry5/configure/page-settings#custom-css-js - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Gerard Prins
- Newbie
- Posts: 13
- Thanks: 0
-
Thank you!
What do you think is preferrable for applying this sitewide a custom style sheet or in Page settings?
I creating a custom.css file in custom/scss with the following code, but it does not seem to work
/* @import "custom.scss" */
h1, h2, h3, h4, h5 {
line-height: 1rem;
}
What I am doing wrong? - Last Edit: 8 years 9 months ago by Gerard Prins.
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- Your choice, maybe site wide if you plan to use it on all pages...
-
The following users have thanked you: Gerard Prins
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Gerard Prins
- Newbie
- Posts: 13
- Thanks: 0
-
Forget it. I named the file .css instead of .scss. Works now
By the by, I ended up using
/* @import "custom.scss" */
h1, h2, h3, h4, h5 {
line-height: 1.1;
}
without rem, because this way the linespacing is proportional on all h-tags.
Using rem would make linespacing look good on h1, but too large on h2 and so forth.
Thanks again - Last Edit: 8 years 9 months ago by Gerard Prins.
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
Yeah you are right
-
The following users have thanked you: Gerard Prins
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
Time to create page: 0.058 seconds