Archived topic
Lower line-height in mobile header
3 replies · Started by d on May 11, 2021
Viewing posts 1–4 of 4
On mobile, my site name breaks into two lines with a huge gap between them. The mobile menu sits on a third line below an equally large gap.
Is there a way to target that text with CSS to keep the line-height small without removing the logo on mobile?
Thank you.
H there,
you can reduce the line-height with some CSS:
@media (max-width: 600px) {
#site-navigation .main-title {
line-height: 20px;
}
}Or you could also try trimming the words to remove the text in brackets on small screens:
@media (max-width: 600px) {
#site-navigation .main-title {
line-height: 20px;
max-width: 23ch;
overflow: hidden;
white-space: nowrap;
}
}May need to tweak the max-width value.
Perfection. Thanks!
First time learning about the max-width as a character count.
Glad to be of help!
This archived topic is closed to new replies.
