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

Home Forums Support Site logo overlaps content body, isn't very responsive

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

    #901952
    David
    Staff
    Customer Support

    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.

    #901965
    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!

    #902356
    David
    Staff
    Customer Support

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

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