Volume: Scale logo with height of Site Title + Tagline

Hi there,

try this CSS to restrict the logo container to a minimum width:

.site-branding-container .site-logo {
    min-width: 60px;
}

Hi David

Thanks that did help.

Though in the horizontal orientation, the logo is larger than Site Title + Tagline.

It would be ideal to lock the logo's height to that of the 2 text elements.

Without using JS - which wouldn't be a good solution - there isn't a magic fix to sizing the logo to match the height of the text elements.

If it helps on the larger screen sizes the height of the title/tag-line is 58px, which you can adjust the logo size and the above CSS to suit.

On the smaller screens where the title/tag-line wrap to new lines it increases to 80px. And you can if you wish use this CSS to adjust the logo to suit:

@media (max-width: 492px) {
    .site-header .header-image {
        width: 80px;
    }
    .site-branding-container .site-logo {
        min-width: 80px !important;
    }
}

Hi David

Using the code:

@media (max-width: 492px) {
    .site-header .header-image {
        width: 80px;
    }
    .site-branding-container .site-logo {
        min-width: 80px !important;
    }
}

On a large width (960px), if I measure the pixels from the top of the R in the Site Title, to the bottom of the p in the Tagline I get 76px

For medium width, iPad (768px) I get 64px

For small width, iPhone 6 (375px) which has the Tagline running into 2 lines, I get 88px

In all cases the square logo image does not appear to be the same height as the Site Title + Tagline.

Is there perhaps an alternative method for getting this height ?

Or perhaps if the logo was just the same height as the Site Title that would make it easier, inline perhaps.