How to reduce the size of the logo on mobile?

Store Design
, , , ,

Topic summary

Goal: Reduce the logo size on mobile for a Shopify store using the Trade theme.

Proposed solution: Add a CSS media query to target mobile widths and set a smaller logo width.

Steps:

  • Online Store → Themes → (… ) → Edit code.
  • Open Assets → base.css.
  • Append:
    @media (max-width: 768px) {
    .header__heading-logo { width: 100px; }
    }
  • Adjust the width value as preferred.

Context: The media query applies the style only when the viewport width is 768px or less (typical mobile/tablet breakpoint).

Status: A clear, actionable CSS fix was provided; no confirmation from the original poster yet, so resolution is unconfirmed.

Summarized with AI on December 24. AI used: gpt-5.
1

I would like to reduce the logo size on mobile, is this possible?

Thank you!

URL: https://suq5b8csct01fyzg-61270851797.shopifypreview.com/collections/rappid-test

Im using the Trade theme.

2

Instructioins

  1. Go to ‘Online Store’ → Themes

  2. From your Active Theme click on the 3 dots (…) → Edit Code

  3. Inside the Assets Folder, locate the file ‘base.css’

  4. Add the below code at the end of the file:

@media (max-width: 768px){
   .header__heading-logo{
        width: 100px;
   }
}

Change the width according to your preference

1 Like