Titles and Taglines

by Graham on 4 Mar 19 in Getting Started

For many the 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.

You may ask why so complicated when it’s far simpler to do this using Elementor or some other page builder. The answer is simple: page builders rely on a whole bunch of styles, scripts and other coding detritus all of which clog up your site and slow things down.