Volume: Scale logo with height of Site Title + Tagline

[Tim]

Hello

When viewing the logo at different viewport widths, it does not scale proportionately with the size of the Site Title.

More specifically this appears to be an issue I can only produce on mobile width in Chrome DevTools, where the tagline jumps from single line to multiple lines, which in turn forces the logo to scale smaller.

What might be the best practice for dealing with this situation ?

Thanks

Tim

[David]

Hi there,

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

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tim]

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.

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tim]

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.

[Author]

Posts