Archived topic
Tagline remaining on one line when resizing browser window, reducing font size
3 replies · Started by Torsten on September 9, 2018
Hi,
on https://bit.ly/2oeCMsI I used a logo image and you helped me to make the menu stay on one line when resizing the browser window with this code:
@media (min-width: 768px) {
.main-navigation .main-nav ul li a {
font-size: 1.5vw;
}
}
if changing the logo image to site title and tag line, can I get the same effect for the tagline?
which means the tagline is max. as wide as the site title, and on one line.
thx in advance,
Torsten
The advantage would be that I could avoid spacing problems between header image (logo) and body on smaller screens.
Hi there,
same CSS properties as the navigation but use this selector instead: .site-description
Hi,
I've added
@media (min-width: 768px) {
.site-description ul li a {
font-size: 1.5vw;
}
}
unfortunately without success, just noticed that the header jumps to 2 lines as well.
I've added this screenshot → https://bit.ly/2Qjh6Z8
1 header in 2 lines
2 tagline in 3 lines
3 menu, perfect!
additional inquiery: is it possible to reduce the height of the slashes to 50% as indicated by the blue square in the screenshot?
I've tried <small>/</small> <smaller>/</smaller> and in customizer / Site Identity / Tagline
you only need .site-description not .site-description ul li a this needs to be an additional rule.
