Change Mobile Logo Size Only

Store Design
,

Topic summary

A user wants to increase their logo size on mobile devices while keeping the desktop size unchanged.

Two CSS-based solutions were provided:

  1. First approach: Add custom CSS code to the theme.liquid file, placing it within <style> tags just above the closing </body> tag. This targets mobile viewports using media queries.

  2. Second approach: Modify the base.css file directly by adding media query rules at the bottom that target the header logo class with max-width properties for screens under 767px and 990px.

Both solutions use @media queries to apply styling specifically to mobile screen sizes, allowing independent control of logo dimensions across devices. The code snippets include !important declarations to override existing styles.

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

I want to make my logo bigger in mobile. I like the size of it in desktop but want it bigger in mobile.

Any help would be greatly appreciated.

www.stellarfaecreations.com

2

Hey @StellarFae

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1722282873259.png
Moeed_0-1722282873259.png378×664 211 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @StellarFae ,

Go to online online store > themes > edit code > search base.css file
Add the following code in the base.css file at the bottom

@media screen and (max-width: 990px) {
    [id] .header__heading-logo {
        max-width: 120px !important;
    }
}

@media screen and (max-width: 767px) {
    [id] .header__heading-logo {
        max-width: 120px !important;
    }
}

And Save the file.

Thanks!