Logo not displaying properly on mobile

You can use the below CSS code to fix the logo size issue on mobile

@media only screen and (max-width: 767px) {
    #Header_creative #Top_bar .logo #logo, #Header_creative #Top_bar .logo .custom-logo-link {
        height: 80px;
    }

    #Header_creative #Top_bar .logo #logo img, #Header_creative #Top_bar .logo .custom-logo-link img {
        max-height: 80px;
    }
      
}

Hi, @mwebsterm,

Logo file issue

There are 4 image tags that show based on the screen resolution.

Here is a screenshot: https://snipboard.io/zJNDiu.jpg

For example, the image with this class logo-mobile shows on mobile. However, the logo-main image shows on desktop.

All of these tags use this file https://mooreattuned.com/wp-content/uploads/2021/09/3.png — you can see that the attachment itself has a lot of empty space around the actual logo.

You can crop the file so only the logo graphic is part of it without any spacing around it and then use the modified file for the 4 image tags.

That way, the logo won’t be too small.

Size changing issue

for a very brief moment when I refresh the page it’s a good size

This happens because there is JavaScript code that sets a max-height to the logo after website loading (style="max-height: 130.281px;"). It isn’t clear why this approach was used.

Using another approach will probably require recoding the logo section or using important styles.

Fixing the actual logo file might be sufficient, and the current sizing approach can be kept.

• This reply was modified 2 years, 1 month ago by aatanasov.

Thanks for the suggestions both of you. ??

I tried that CSS code and it did make it slightly larger, but not by much, and it increased the size of the header top bar which I preferably would like to keep the same. Not sure what I would amend with that code?

And I also used a transparent image instead (I thought I already uploaded the transparent version but obviously not!) so that issue of the white square has gone, but it’s still tiny. I didn’t set that JavaScript code, can I just change that to larger values? Or will there be something else involved?

Thanks again.

Hi @mwebsterm,

The logo has been changed to a transparent one, but there is still space around the logo.

Please review this screenshot: https://snipboard.io/vuQX73.jpg — the white area is a transparent background, but it shows how much space it takes, which is used by the img tag.

The transparent area above and below the graphic should be removed.

If you upload a logo like this one: https://i.snipboard.io/7HKzXP.jpg

The result on mobile will be like this: https://snipboard.io/N6L230.jpg

Regarding the JavaScript question: it is currently necessary to set the correct height of the logo depending on the dimensions of the uploaded attachment logo. If the logo works as expected after cropping the logo correctly, you can keep that JavaScript functionality.