Narrative Theme - Logo too small on mobile

[rosie7]

My homepage logo is appearing tiny on mobile for some reason and changing the logo height doesn't seem to help. I had a quick look in theme code but can't seem to see how to change this.

Any help would be much appeciated,

Rosie

[Rue]

I actually had the same problem and this is how I fixed it:

Once you are in the code editor, you have to go into the Assets folder and select Add a new assest. Name it mobilelogo.css and paste in the following code:

@media only screen and (max-width: 749px){
  .site-header__logo-image {
    max-height: 80px;
  }
}

Next you will want to head over to the Layout folder and open theme.liquid. Paste in the following line of code right above </head>:

{{ 'mobilelogo.css' | asset_url | stylesheet_tag }}

Play around with the "max-height: 80px;" parameters in order to get your logo exactly the size you want it. "80px" is just serving as a placeholder because that's what worked for me but everyones needs/preferences are different.

Hope this helps!

-Rue

[Rue]

I actually had the same problem and this is how I fixed it:

Once you are in the code editor, you have to go into the Assets folder and select Add a new assest. Name it mobilelogo.css and paste in the following code:

@media only screen and (max-width: 749px){
  .site-header__logo-image {
    max-height: 80px;
  }
}

Next you will want to head over to the Layout folder and open theme.liquid. Paste in the following line of code right above </head>:

{{ 'mobilelogo.css' | asset_url | stylesheet_tag }}

Play around with the "max-height: 80px;" parameters in order to get your logo exactly the size you want it. "80px" is just serving as a placeholder because that's what worked for me but everyones needs/preferences are different.

Hope this helps!

-Rue

[negativespaces]

Hi Rue, 

I had the same issue on Narrative and followed your steps but my logo still seems to be too small on the mobile version. My logo image is a transparent background png. 410px width x 205px height and I changed the suggested max height to 80px in the mobile.css code and played around with it up to 100px but it didn't change at all on the mobile version. Is it something to do with my actual logo image file? Would really appreciate your help on this as it has been bugging me for weeks now! See picture attached. 

Thanks Sonia

[AndyRupnarine]

hello, it didn't work because the new ending for css files are ".scss" and in the second part of the instruction where you paste "mobilelogo.css" in the theme.liquid file, you need to change it to "mobilelogo.scss". I just tried it and it works. 

So to clarify, paste the following line of code in the theme.liquid file, just above the </head> line:

{{ 'mobilelogo.scss' | asset_url | stylesheet_tag }}

This is just a modification to Rue's fix.

[Franks-PC-HW]

Hello! I found a  solution that will allow you to make the logo larger on desktop as well, because it is likely too small there as well. If you navigate to "Header.Liquid" within the code editor, you will be able to modify the max/min logo size easily. Between lines 355-361 you will find the parameters for the logo size. Edit the max height to whatever you would like and adjust the logo with the slider within the theme editor dashboard. 

The default "max" height is 60px, I changed it to 120px to suit my needs. This will change the max size for desktop, but both are equally too small IMO, so you will need to add the Style mentioned above in order to make the logo larger on mobile. It does work, make sure you use the .scss extension.

"id": "logo_max_height",
"type": "range",
"min": 10,
"max": 120,
"step": 5,
"unit": "px",
"default": 15,

[AllanB]

My mobile enlarged slightly, but not my desktop logo.

This is what I did. Not working... can you help? Thanks

[Franks-PC-HW]

Hey! I did a bit more work since my initial post, I have updated it to reflect how to change the logo size on both desktop and mobile correctly. Here is your solution! 

For Desktop Logo Size; 

Navigate to "Header.Liquid" within the code editor. You will be able to modify the max/min logo size easily. Between lines 355-361 you will find the parameters for the logo size. Edit the max height to whatever you would like and adjust the logo with the slider within the theme editor dashboard. 

The default "max" height is 60px, I changed it to 120px to suit my needs. See the text below and attached picture for reference

"id": "logo_max_height",
"type": "range",
"min": 10,
"max": 120,
"step": 5,
"unit": "px",
"default": 15,

[AllanB]

Thanks for your reply. Problem is for some reason it's not changing on my side? 

[Franks-PC-HW]

According to your first post you only followed the steps required to change your mobile logo size. You need to change the code in Header.Liquid in order to change the desktop logo size. What you have done will only modify it on mobile. You must change the max logo height on header.liquid code.. Then save.. Then go to your themes menu and click "customize" as if you are going to change the website design. Once you are in the theme editor, click on the "header" column on the left hand side, and slide the logo slider to make it larger than previously available. 

[IdyWatt]

Nothing seems to work for me. I have tried everything posted here.

[IdyWatt]

Did you manage to find a solution Rosie? Thanks

[palproduce]

Hi, My friend,

Did you find the solution? were you able to make you logo bigger? i also tried all the solution but nothing is working for me as well. Please let me know if you find the solution will be a great help. 

Thank you!

[kateworker]

Hello there, I followed all the instructions to change the logo size for both desktop and mobile.

So tks to everyone helped us because I finally solved the problem on the desktop side

By the way on mobile view the change is still really poor, It's really a pity because the theme is very nice but the user experience with this logo view on mobile is still too poor and in this screenshot seems big but if you have a look directly on iphone is very tiny. 

[IdyWatt]

Hey man I will get back to you in a bit. I don’t have access to my
computer right now. I got you though.

[IdyWatt]

Let me know if it works.

[IdyWatt]

Input this code - 

@media only screen and (max-width: 749px){
  .site-header__logo-image {
    max-height: 75px;
  }
}

- at the very bottom of theme.scss.liquid (assets) and then play around with the 'px' number to change your logo size. Don't forget to save! It worked perfectly for me and should work for everyone.

[kateworker]

tks a lot! you made my day 🙂

[Solos]

Perfecto!

[Donwankka]

You can just click on the logo and inspect. Then adjust the value on the code.