[Resolved] Site logo overlaps content body, isn't very responsive

[ruzek]

Hi there,
I created a new hero element for a specific page on my site, matching my homepage hero settings, and I am having two issues:

1. the (taller) logo isn’t responsive, as its doesn’t seem to scale appropriately
2. the logo overlaps the content body, and adjusting the z-index doesn’t seem to make a difference

I’m using Mellow, and it doesn’t look like anything there would be causing the issue.

One last thing – is there a way to hide the site tagline in elements without using CSS? I’m okay with the latter though.

Thanks!

[David]

Hi there,

so the large Bees Knees logo you could use this CSS to make it responsive:

.site-header .header-image {
    width: 32vw;
}

This resizes it based on the viewport width – in this case 32% of that width.

To hide the Tag Line will require CSS. Let me know if you need help with that.

[ruzek]

Thanks David,

I totally neglected to mention that the issue is only on mobile! I adjusted the CSS to the following:

@media (max-width: 600px) {
.page-id-3821 .site-header .header-image {
    width: 40vw;
}
}

I already had a style for max-width on desktop that I had commented out, so this wasn’t far from what I had done there. I forgot about viewport width, thanks!

[David]

Awesome – VW widths can be very handy. Glad you got it resolved.

[Author]

Posts