Change header size in mobile view Impulse theme

Store Design
, , , , ,

Topic summary

A Shopify store owner using the Impulse theme needs to reduce the header/site name font size in mobile view, as it appears too large.

Solutions Provided:

  • CSS approach: Add custom CSS to base.css, style.css, or theme.css targeting .site-header__logo with a media query for max-width 768px, setting font-size to 25px.

  • Alternative method: Insert code before </body> in the theme.liquid file to adjust logo sizing.

Current Status:

The initial solution worked but only affected the homepage in mobile view, not throughout the entire site. The store owner requested help extending the fix to all pages. A follow-up response noted the store is now password-protected, preventing further troubleshooting until access is restored.

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

My body font size seems to be fine however my header font size/site name is too large in mobile view.

Any help to correct would be appreciated!

https://ellesalinas.myshopify.com/

pw ahyews

1 Like
2

Hi @ellesalinas

Do you mean the logo font size? If that so you can try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 768px){
.site-header__logo {
    font-size: 25px;
}
}
  • And Save.
  • I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Hi @ellesalinas ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

I realize this situation isn’t exactly what you’d hope for, but I’ve got a potential solution that I’d like to share with you:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Beae_Anthony_0-1692301131286.png
Beae_Anthony_0-1692301131286.png440Ă—688 197 KB

Best regards,

Anthony

4

Thank you Ribe.

Will I have to center the logo in order to not have the name overlapping like it is in mobile view?

I would prefer that it would be on one line.

5

That worked, thanks!

6

Hi Anthony-

I noticed the code changed the logo size on only the home page and not throughout the site in mobile view.

What code would be appropriate to fix this issue?

7

Hi @ellesalinas ,

Sorry for the late response. I went to your store but it seems the password has changed. If you still have that problem, please provide it back to me. I will check and give you a solution