Titles and Taglines

by Graham on 4 Mar 19 in Support

For many their site Title and Tagline will fit nicely in the header on all devices. But for some they might be a bit too long and over spill into two lines on smaller screens. Not disastrous but not aesthetically pleasing on the eye.

There are two fairly simple ways to fix this.

1. Shorter Titles and Taglines
2. Change the font sizes

The first option is probably a bit drastic so I suspect you will want to opt for the second.

Instructions for use:

1. Go to the Customiser.

2. Click on Additional CSS.

3. Enter the following code:

@media only screen and (max-width: 960px) {
    #logo-title {font-size:1.3rem;}
    #logo-tagline {font-size: 0.9rem;}
}
@media only screen and (max-width: 600px) {
    #logo-title {font-size:1.2rem;}
    #logo-tagline {font-size: 0.8rem;}
}

4. At the bottom of the screen click on the device icons to see how it looks on desktop, tablet and phone.

5. Adjust the font sizes as necessary.

6. Publish when you are happy.