[Support request] Volume: Scale logo with height of Site Title + Tagline

Home Forums Support Volume: Scale logo with height of Site Title + Tagline

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1206672
    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

    #1207151
    David
    Staff
    Customer Support

    Hi there,

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

    .site-branding-container .site-logo {
        min-width: 60px;
    }
    #1208147
    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.

    #1208213
    David
    Staff
    Customer Support

    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;
        }
    }
    #1209141
    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.