Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Mercury theme logo placement broken for mobile phones

  • #6656
    Avatar photo[anonymous]

    Hello. I’ve been using an older version of mercury theme on my website. I upgraded to the latest release 2.2.0 but it has broken how the logo is placed. When checked in phone mode, the logo overlaps the title of the website. When opened on a desktop, the logo becomes really small. Can someone please suggest a fix?

    Old mercury theme rendering

    New mercury theme rendering

    #6657
    Avatar photoBob

    Could you kindly provide me with the link to your website? 🙂

    #6660
    Avatar photo[anonymous]
    This reply has been marked as private.
    #6662
    Avatar photoBob

    Thanks. It works very well for me, just look at the attached video.
    What soft did you use to check responsiveness?

    #6664
    Avatar photo[anonymous]

    The old website works properly which was based on Mercury v1.6.10.0 . Now I”m trying out Mercury 2.2.0.0 as I wanted to use it. But that has this problem. If you just upload a logo to the Mercury theme and check in phone mode, you’ll see the issue. I’ve also shared my input folder which has the settings and logo.

    #6665
    Avatar photoBob

    Ah okay, so I tested the old one instead of the new one. Ok, give me a minute, I’ll check it out.

    #6666
    Avatar photoBob

    Add the following CSS rule to your theme via the Custom CSS tool :

    @media all and (max-width: 56.1875em) {
      .logo > img {
        max-height: 4rem;
      }
    }
    

    I think it should help.

    #6667
    Avatar photo[anonymous]

    That worked! Thanks a lot. But now the logo is much smaller than I wanted for all screen sizes. Is there a fix for that?

    #6668
    Avatar photoBob

    The logo should not be larger than the menu bar, so this is why it is 4 rem high and only to the tablet size. On the bigger devices, it will work as before.
    You want to make it a little bit bigger, so try increasing the logo size to, for example: 4.5rem

    #6671
    Avatar photo[anonymous]

    Thanks that worked for mobile device. But on the full screen size, the logo is still smaller than the size I see with the older version. In the older version, the computed logo size for big screen is 300×200. In the new version it’s quite smaller.

    Thanks a lot for your helpful responses.

    #6684
    Avatar photo[anonymous]

    I got the look I wanted with this:

    @media all and (min-width: 56.25em) {
      .logo > img {
        height: 8rem;
        min-width: 12rem;
      }
    }

    Thanks a lot for all your help!