Mobile app title formated wrong

Store Design

Topic summary

Issue: Company name/logo text on mobile displaying at an undesired size in the header; prior code attempts didn’t change formatting.

Key fixes suggested:

  • Add a mobile-only CSS rule to reduce the header title font size, e.g.,
    • @media (max-width: 767px) { .header__heading span.h2 { font-size: 17px !important; } }
  • Adjust header link padding on mobile:
    • @media (max-width: 749px) { .header .header__heading-link { padding: 0.2rem !important; } }

Where to add CSS:

  • theme.liquid (commonly before ; one suggestion placed it before ).
  • Alternatively, edit base.css (or your main CSS) and append the media query at the end.

How to navigate:

  • Online Store → Themes → Edit code → theme.liquid (or Assets → base.css).

Notes:

  • Some replies included screenshots; a couple of code blocks appeared empty, but the approach is consistent: use a media query to target mobile.

Outcome:

  • The original poster confirmed the solution worked and expressed thanks.

Status: Resolved; no further open questions.

Summarized with AI on December 20. AI used: gpt-5.
5

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!