How can I enlarge the header logo size on mobile only?

Store Design
1

Hi Everyone,

Another request for help. On our mobile site, our header logo is tiny even though we have it set to the largest possible px size in our narrative theme.

Can anyone tell me the code to increase this please?

Thanks so much :blush:

www.annyanderyn.com

annyeryn29_0-1676050519821.png
annyeryn29_0-1676050519821.png1080×2400 293 KB

2

Hi @annyeryn29 , go to edit code > assets > theme.scss.css and add this:

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

Instead of 60px - add the value you’d like. Then, when you change height in your theme, it’ll work. :slightly_smiling_face:

3

Hi @annyeryn29 ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.scss.css->paste below code at the bottom of the file:

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

Hope my answer will help you.