Changing logo size for narrative theme on mobile device

Shopify Partner
5 0 1

Hi there, 

Can somebody please advise me on how to change my logo size for mobile? For some reason, my header logo looks great on a desktop but reduces its size massively when displayed on a phone.  

Any advice would be great :) 

0 Likes
New Member
2 0 1

Did you ever figure this out? I'm having the same problem. My logo is ridiculously small on mobile.

1 Like
Tourist
8 0 2

Hi have the same problem as well. Hopefully someone would know the answer.

Cheers

1 Like
Shopify Partner
5 0 1

Hi Guys, 

Phone Shopify support - they're great and this is included in the design budget for narrative :) 

This was really bugging me but literally took a couple of hours after requesting it. Take a look - www.activemonthly.com

hope this helps

1 Like
Tourist
8 0 2

Thanks George... I will call them tomorrow!

Did you by any chance see what code they modified or did they just modify it and let you know when its done.

I would love to see how they fixed it (what code they modified) after spending several hours trying to figure this out :) :)

 

 

0 Likes
Tourist
8 0 2

Thats what they modified for you... i have it at 30px and when i change it to 60 it does the trick. However i cant find this class anywhere in the theme scss file. 

Anyway.. ill call them . Thanks again.

0 Likes
Shopify Partner
2 0 1

You need to add a custom style sheet:

1. Click "Online Store" > Click "Actions" > "Edit Code"

Once there add a new custom style sheet (.css) under new assets:

2. Scroll down to Assets > Create New Asset > .css

3. Put in custom mobile code to change the size of the logo at devices under 749:

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

4. Reference new style sheet in Layout/theme.liquid:

{{ 'custom-style.css' | asset_url | stylesheet_tag }}
</head>

Change "custom-style.css" to your css file that you created. Make sure to add it right before </head>

 

Done :)
 

 

1 Like
Tourist
8 0 2

Thank you.. 

So i created a .css asset named 

mobilelogo.css

 

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

 

I then placed this in my theme.liquid file like in the attached screen shot.

I didnt seem to work so im sure i did something wrong :)

 

0 Likes
New Member
1 0 0

Hi, did you find a result for this? I am also very interested in help with this.

0 Likes
Shopify Partner
2 0 1

In the screenshot you put the link to the new style sheet in the wrong place. You put it outside the <head> tags. 

Find the closing </head>. Tag and place it right above it. 

0 Likes