How to increase logo size on mobile? Turbo theme

Topic summary

Mobile logo size on the Turbo theme needs increasing without breaking the layout.

  • Editing theme.liquid led to code appearing at the page bottom, so a helper adjusted settings via staff access. The mobile logo height was set to ~60px (not the requested 120px) to prevent overlap.

  • After initial success, the change caused the header/logo area to crop the top of sliders and content across the site (home, product, collection, and other pages). Multiple screenshots were shared to show the issue.

  • A subsequent tweak was applied (“please check now”), but the latest update reports the cropping persists. No final fix or rollback is documented.

  • A second store requested similar help. Suggested solution: add a mobile-only CSS media query (max-width ~798px) in styles.css to (1) reset the mobile logo link’s position to “initial,” (2) set the logo image’s max-width to 180px and max-height to 90px, and (3) set the mini cart height to 90px; values should be adjusted as needed.

Status: Ongoing. Key unresolved issue is header height/offset causing content to be cut off on mobile; confirmation of a stable fix is pending.

Summarized with AI on March 1. AI used: gpt-5.

I’d really like to make my logo bigger on mobile. It’s just too hard to read on mobile, it seems the height isn’t high enough but cannot for the life of me see where to increase it. I have tried adding code to the theme liquid as suggested in some other posts, but this then appears on the bottom of the site front end, which isn’t great! Anyone can help please?

Website is www.lespetits.fr

Thanks,

Lauren

@LaurenMcCreery - can you please add me to staff? I can make like screenshot, needs multiple code settings

Thanks so much, I’ve sent you access now. I reckon maybe 120 px is high enough. Thank you again

@LaurenMcCreery - I made the change, it is 60px right now, 120 would be too much and will come down over image

This is perfect! Thank you so much. I have a few other things I need fixing, I’ll email you.

@LaurenMcCreery - I have sent you a message, please check

Hi again,

I have just seen that it actually has chopped off the top of the sliders, and they look a bit weird now. Is there any other way around this?

Thanks,

Lauren

@LaurenMcCreery - please check now

Hi there,

Sorry to bother again about this but the logo appears to be chopping off the top of all pages on my site. Images or text on Homepage / Product pages / collection pages / Page details pages. See screenshots below the chopped off versions vs what the image / text is underneath. Is there any way to fix this please? Many thanks

Can someone please help me out with this as well? Cannot figure out how to increase my logo size on mobile. Using the Turbo theme. Thanks in advance!

@xavieralexis - can you please share your website link?

wonderlustx.com thank you once again.

@xavieralexis - please add the given css to the very end of the styles.css file

@media only screen and (max-width: 798px){
#header .top-bar a.mobile_logo {
    position: initial;}

/********adjust numbers as per need******************/
#header a.mobile_logo img {
max-width: 180px; 
max-height: 90px;
}

.cart-container .mini_cart {
    height: 90px;
}

}
1 Like