Too much white space around my logo on mobile

The recommended logo size for most of our themes is around 800x200px. If your logo is narrow and does not take up this whole space, there will be extra white space around your logo that can cause it to display very small on mobile devices.

To fix this, we'll remove some of the white space from around your logo and then update the theme with your new header dimensions.

Before making any edits to your Functions.php file, please make sure that you have access to the  File Manager in your cPanel or FTP. The Functions.php file is incredibly sensitive and if a mistake is made, it can cause the "white screen of death" on your site. Having easy access to your File Manager means you can easily upload a fresh copy of the Functions.php file if the need arises.

1. Open your header image in an image editing program and crop out any white space on the left and right. Write down or memorize what the new dimensions of your header image are (example: 200px width by 300px height).

2. In your Wordpress dashboard, go to Appearance > Editor > Functions.php.

3. Find the "Custom Header" section. If you can't find it, press Command/Ctrl + F to search.

4. Change the width and height values to match your new dimensions from step 1. Update File.

5. Go to Appearance > Editor > Style.css. Press Command/Ctrl + F and search  .header-image .site-header

6. Under "background-size," replace the first number with your new WIDTH. Replace the second number with your new HEIGHT.

7. Right below, find  .header-image .site-title a. Replace the min-height number with your new HEIGHT. Under "background-size," replace the first number with your new WIDTH and if there is a second number, replace it with your new HEIGHT.

8. Update File. Your header should now look much better on mobile!

Considerations for Retina-Friendly Themes

Some of our newer themes feature retina-friendly headers. This means the theme requires you upload header images at 2x the normal size for optimal display on retina devices. It will be noted in your Theme Documentation if your theme uses a retina header. 

Follow the same instructions as above, but with two modifications:

  • Whatever size you want your logo to display at, save it at double that size. It'll look quite large, but it'll be resized by the theme once uploaded. Use your new "doubled" dimensions in the Functions.php in step 4.
  • In steps 5-7, use the original dimensions (or half of what you used in the Functions.php).

An example: You want your header to display on your site at 200x300px. You would save your logo at 400x600px and use those dimensions in the Functions.php. You would use the 200x300 dimensions in the style.css.