Sign in

Mercury theme logo placement broken for mobile phones

  • This topic has 10 replies, 2 voices, and was last updated 5 months, 1 week ago by .
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #6656
    jaideep

    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
    Bob

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

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #6660
    jaideep
    This reply has been marked as private.
    #6662
    Bob

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

     

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #6664
    jaideep

    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
    Bob

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

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

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

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #6667
    jaideep

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

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #6671
    jaideep

    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
    jaideep

    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!

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Mercury theme logo placement broken for mobile phones’ is closed to new replies.