Archived topic

Site logo overlaps content body, isn't very responsive

3 replies · Started by ruzek on May 16, 2019

Viewing posts 1–4 of 4

May 16, 2019 at 12:51 pm #901915

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!

May 16, 2019 at 1:42 pm #901952

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.

May 16, 2019 at 1:57 pm #901965

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!

May 17, 2019 at 3:17 am #902356

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

This archived topic is closed to new replies.

Start building better websites today.