How can I increase my logo size in Local theme on mobile?

Store Design

Topic summary

A user seeks to increase their logo size on mobile devices beyond the maximum allowed in the Local theme settings. Two solutions are provided:

Solution 1 (Dan-From-Ryviu):

  • Add custom code to the theme.liquid file before the closing </head> tag
  • Access via: Online Store > Themes > Edit code

Solution 2 (oscprofessional):

  • Insert CSS code into theme.css file (located in Assets folder)
  • The code targets .site-header.logo img with a media query for screens up to 767px width
  • Sets logo width to 235px with !important flag
  • Add the code at the bottom of the CSS file

Both approaches involve editing theme files directly to override the default mobile logo size restrictions.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

So I want to increase my logo size on mobile template for my website. In the settings it is maxed out and cant make it any bigger. Can someone help me edit it in the code?

https://carnivalcandiesicecream.com/

Screenshot 2023-09-26 at 1.32.20 AM.png
Screenshot 2023-09-26 at 1.32.20 AM.png788×560 37.5 KB

2

Hi @CarnivalIce

You can add this code to theme.liquid file before tag in Online store > Themes > Edit code
3

Hello @CarnivalIce

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

@media screen and (max-width: 767px){
.site-header .logo img {
    width: 235px !important;
}
}