Logo Size Widens (Distorts) in Mobile Site

Shapely
1

Hello,
I have made a custom logo for my site https://www.catcryptobot.com and it’s dimensions are exactly 521x95. It works fine everywhere, and even on the mobile site at first but when I try to browse within the site, click a link to another page, the logo gets distorted, it widens to an abnormal width. But when I refresh that page, the logo turns back to normal. And the same thing happens when I click on a new link, and so on. So I tried using this code suggested for another colorlib theme in another post:

/*mobile logo css*/
@media (max-width: 521px){
#header .top-header .header-logo {
font-size: 30px;
}
}

But didn’t work unfortunately. Is there a specific size I have to use in shapely or is the css code to be used different in our theme?
The logo example screenshots are attached.

Thank you for your help :slight_smile:

2

Nothing? No one? No defaults? :slight_smile:

3

Sadly nobody answered but it is because it is a very common and hardly solved problem I guess… but I have finally found the solution for my site. So anybody searching around for the solution of a stretched logo in mobile view, here is the code you need to paste in your additional css:

@media(max-width: 550px){
.logo {
height: 45px!important;
width: auto!Important;
}}

You can of course change that height and make it bigger or smaller. This worked for me… You have your limit until your proportional width exceeds 550px… Rest is up to you.
I hope this works for you all.
Peace :slight_smile:

4

Hi,

Sorry for a late response, somehow I didn’t noticed your thread, that is why no answer, glad you solved it yourself. :slight_smile:

Let us know if you have any other questions,

Thanks,
laranz.

5

Sorry to bump this topic up again but there seems to be a related problem again after updating shapely to the latest version.

Right after the update I have noticed that my logo increased in size and the Logo Width & Height options in the Logo Settings did not work as expected. Actually they are already set to 301x55 and it can be seen on the site that the logo is much much larger. Here you go: www.catcryptobot.com
Yet, this time my logo on mobile seems perfectly fine unlike the previous problem I had and solved (can be read in the above posts).

I have tried changing the values in Additional css as above, and they didn’t have any affect either. Nothing seems to change with these settings now and the huge logo has an ugly look.

Could someone please point out what I should be changing to make the logo smaller again?

6

Solved it by adding the following to additional css:

.logo {
height: 35px!important;
width: auto!Important;
}

The px sizes seem to be changed somehow :slight_smile: 55 of before is the 35 of today lol

7

Hello there,

I am glad the issue was resolved and thanks for posting the solution.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support