BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty nineteen

How to Adjust Your Logo Size in the Twenty Nineteen Theme

23 threads Sep 16, 2025 Theme → Twenty nineteen

Content

One of the most common customizations for the Twenty Nineteen theme is adjusting the size of the site logo. The default square dimensions don't always work for logos that are rectangular or wider. Based on community discussions, here are the most effective ways to control your logo's appearance across desktop, tablet, and mobile views.

The Problem

The Twenty Nineteen theme sets a default square size for the logo, which can cause a few issues:

  • Rectangular logos appear very small or get cut off.
  • The logo size is not consistent across different screen sizes (e.g., too small on mobile, cut off on tablet).
  • Users want to replace the default square logo and site title text with a single, larger rectangular image.

Solution 1: Using Custom CSS (Quick Fix)

The simplest method is to add custom CSS via the WordPress Customizer. This approach is best for making simple size adjustments without changing the logo's fundamental square aspect ratio.

  1. Go to your WordPress Dashboard.
  2. Navigate to Appearance → Customize → Additional CSS.
  3. Paste the following code, adjusting the pixel values to your desired size:
@media only screen and (min-width: 768px) {
  .site-logo .custom-logo-link {
    width: 100px;
    height: 100px;
  }
}

This code targets screens wider than 768px (typically tablets and desktops). To also adjust the logo on mobile, you would need to write a similar media query for smaller screen sizes.

Solution 2: Using a Child Theme (For Advanced Control)

If you need to change the logo's aspect ratio from a square to a rectangle (e.g., 400x59 pixels), the CSS method above may not be sufficient. In this case, you can use a child theme to modify the theme's core logo support.

  1. If you haven't already, create and activate a child theme for Twenty Nineteen.
  2. In your child theme's functions.php file, add the following code:
add_action( 'after_setup_theme', 'twentynineteen_child_setup', 100 );
function twentynineteen_child_setup() {
    add_theme_support(
        'custom-logo',
        array(
            'height'      => 100,   // Adjust this height
            'width'       => 300,   // Adjust this width
            'flex-width'  => false,
            'flex-height' => false,
        )
    );
}

This code overrides the default logo dimensions set by the parent theme, allowing you to define a custom width and height. After adding this code, you may need to re-upload your logo in the Customizer for the new dimensions to take effect.

Why This Happens

The Twenty Nineteen theme was designed with a specific, minimalist aesthetic in mind, which initially included a square logo. This design choice ensures consistency but can be limiting for brands with different logo shapes. The methods described here are community-vetted workarounds to extend the theme's flexibility.

Final Notes

Always remember to clear your browser cache after making CSS changes to see the results immediately. Using a child theme is the recommended best practice for making any functional changes to a theme, as it prevents your modifications from being overwritten during theme updates.

Related Support Threads Support