How to Change the Header Logo Size in the Reign Theme

In the Reign Theme, you can upload your site logo through Appearance → Customize → Site Identity. By default, the theme applies recommended logo settings (maximum width: 150px, maximum height: 90px) to ensure a clean and consistent appearance.

However, depending on your branding and design needs, the logo may not always display at the desired size. To customize it further, you can add Additional CSS to precisely control the logo’s width and height on both desktop and mobile devices, ensuring it perfectly matches your site’s layout.

Steps to Add Custom CSS

1. Log in to your WordPress Dashboard.

2. Go to Appearance → Customize → Additional CSS.

3. Copy one of the CSS snippets below depending on your requirement.

4. Click Publish to apply the changes.

Additional CSS Snippets

1. Change Only Logo Width (Desktop Only)

@media screen and (min-width: 961px) {
.site-branding a img {
max-width: 150px; /* Recommended */
}
}

2. Change Only Logo Height (Desktop Only)

@media screen and (min-width: 961px) {
.site-branding a img {
height: 90px; /* Recommended */
max-height: 90px; /* Prevents stretching */
}
}

3. Change Both Width and Height (Desktop Only)

@media screen and (min-width: 961px) {
.site-branding a img {
max-width: 150px; /* Recommended */
height: 90px; /* Recommended */
max-height: 90px;
}
}

4. Apply Common Height/Width (Desktop + Mobile)

.site-branding a img {
max-width: 150px; /* Recommended */
height: 90px; /* Recommended */
max-height: 90px;
}

5. Change Only Mobile Logo Size

@media screen and (max-width: 960px) {
.site-branding a img {
max-width: 150px; /* Recommended */
height: 90px; /* Recommended */
max-height: 90px;
}
}

 Recommended Settings

• Max Width: 150px

• Max Height: 90px

These values work well across most layouts to ensure your logo looks clean, professional, and not distorted on both desktop and mobile devices.