Does your title expand outside your header? This typically happens if you use your name as the page title. On a narrow mobile screen your last name will be placed on a line below your first name and the page title will be too tall for the header.
This is how you fix it quickly
You can do two quick fixes, or a combination of the two. Both rely upon media queries to work. Media queries are css that are only applied under certain conditions such as the screen being less than 600 pixels wide.
Read the following section if you want to find the best break point for your site.
If the screen is less than 600 px wide you can specify css rules that will take effect on narrow screens. In this case the 600 pixel breakpoint might work well or it might need some adjustemnts. You can find the best breakpoint value for your header by using the inspector. Open the inspector (Win: Ctrl + Shift + i Mac: Cmd + Shift + i). Click and drag the separator between the inspector window and the web browser content. Drag it sideways to make the browser content more narrow and notice what the width in pixels is when your page title needs adjustments.
You can then do the same for mobile devices using the emulated mobile view. In your inspector window you have to click the second icon from top left. Hovering over that icon it should say ‘Toggle device toolbar’. With device toolbar active you can select to emulate various some phone types. You can try these and see how it looks. In order to find the breakpoint, the pixel width when something must be done, choose ‘Responsive’ as a device. You can now drag the side of the device window to adjust the size and you should be able to find the screen width when your header needs special css treatment.
The CSS part, adjusting font size and/or header height.
If the text wraps over two lines and becomes to tall for the header you can make the font smaller or the header taller. I prefer making the font smaller as space is already limited on mobile devices so having a header covering a third of the screen is not great. Here is the CSS that sets font size of main-title and site-description and it sets the height of the header.
NOTE! Make sure you place the following CSS after all other CSS rules targeting the same elements.
@media screen and (max-width: 600px) {
.main-title {
font-size: 1.6em;
}
.site-description{
font-size: 1.2em;
}
#masthead {
height: 60px;
}
}Adjust the values so it fits your layout. If you need to make more adjustments you can add new css rules to the mix, or even add another break point with even more rules.If you don’t want to adjust the header height just delete the #masthead part.