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

December 17, 2021 at 6:11 am #6656

[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

December 17, 2021 at 6:16 am #6657

Bob

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

December 17, 2021 at 6:26 am #6660

[anonymous]

This reply has been marked as private.

December 17, 2021 at 6:42 am #6662

Bob

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

December 17, 2021 at 6:47 am #6664

[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.

December 17, 2021 at 6:48 am #6665

Bob

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

December 17, 2021 at 6:59 am #6666
Bob
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.
December 17, 2021 at 7:10 am #6667

[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?

December 17, 2021 at 7:16 am #6668

Bob

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

December 17, 2021 at 7:25 am #6671

[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.

December 17, 2021 at 6:40 pm #6684
[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!