[Resolved] Volume: Blog Hero Category Label + H1 obscured by site-branding [Mobile]

Home Forums Support Volume: Blog Hero Category Label + H1 obscured by site-branding [Mobile]

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1212766
    Tim

    Hello

    In the Volume theme, it appears that on small widths in the Blog post hero, the category label and h1 are pushed up behind the site-branding (logo, site title and tagline)

    As far as I’m aware, I’ve not changed the CSS significantly to have caused this. These 2 changes were made:

    .site-branding-container .site-logo {
        min-width: 60px;
    	margin-right: 1.0em;
    }

    and

    .page-hero {
    	padding-top: 10%;
    	padding-bottom: 10px;
    }

    When reverting these changes the issue still persists on widths of less than about 410px. (verticle iphone SE,6,7,8,X)

    Please could you suggest a solution in keeping with the Volume style ?

    Thanks

    Tim

    but if I remove that CSS the issue remains.

    Is there something else that is causing this issue, or was the theme like that from day 1 ?

    Thanks

    Tim

    #1213053
    David
    Staff
    Customer Support

    Hi there,

    You don’t need this CSS:

    .page-hero {
        padding-top: 10%;
        padding-bottom: 10px;
    }

    This is overriding the padding and the Offset Site Header Height that is set in the Header element.

    So edit the merged Header Elements you’re using:
    1. Increase the top paddingthe original Volume Site it was 18%
    2. On the Site Header tab the Offset Site Header Height was 140px

    Either of these may need increasing to compensate for your header being larger especially when the navigation drops below the logo.

    #1213589
    Tim

    Hi David

    OK I removed the CSS, and the Elements for Pages, Blog and Single post header were at 18% top, untouched. The Single post still had its Offset Site Header Height at 140px.

    So it all looks good on the mobile widths like this.

    But, I find this excessively high for the largest width.

    So what might be the best approach for a media query for the larger width ?

    Thanks

    Tim

    #1218344
    David
    Staff
    Customer Support

    The Header Element has separate padding options for desktop and mobile. Nothing stopping you from reducing the padding for desktop and if need be you can increase the Offset Site Header Height to stop stuff from riding up behind the nav.

    #1219284
    Tim

    Great.

    I seem to have what I want now.

    I should have thought to play around with those settings to see what was possible.

    Thank you again David.

    #1219425
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.