Archived topic

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

5 replies · Started by Tim on March 28, 2020

Viewing posts 1–6 of 6

March 28, 2020 at 2:55 am #1212766

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

March 28, 2020 at 7:49 am #1213053

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.

March 28, 2020 at 8:02 pm #1213589

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

March 29, 2020 at 6:24 am #1218344

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.

March 30, 2020 at 3:54 am #1219284

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.

March 30, 2020 at 6:44 am #1219425

Glad to heat that

This archived topic is closed to new replies.

Start building better websites today.