Title page on mobile not disapear

Store Design
, ,

Topic summary

Issue: Page titles were successfully hidden on desktop via CSS but still appear on mobile.

Context: Shopify theme customization in base.css/theme.css. Store URL shared: https://excitarestudios.myshopify.com/. Screenshots were provided to show the desktop vs. mobile behavior.

What was tried:

  • Global rule: .page-title { display: none !important; } — works on desktop only.
  • Mobile-specific media queries suggested and tested:
    • @media (max-width: 768px) { .page-title { display:none !important; } }
    • @media (max-width: 780px) { .page-title { display:none !important; } }
      — OP reports these did not remove the title on mobile.

Latest update/suggestion:

  • Use a more specific selector targeting the actual element:
    h1.main-page-title.page-title.h0 { display: none !important; }

Status: No confirmation yet that the latest selector resolves the issue; discussion remains open with the most recent action being the more specific CSS rule.

Summarized with AI on December 13. AI used: gpt-5.
11

Hi

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file
h1.main-page-title.page-title.h0 {
    display: none !important;
}

Thanks!