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.
1

Hello,

I already removed my title pages on desktop with this code in base.css:

}
.page-title {

display:none !important;
}

Unfortunately this code only works on desktop. The title on mobile is not disapearing.

Can somebody help?

Screenshot 2024-12-02 at 09.22.30 1.png
Screenshot 2024-12-02 at 09.22.30 1.png1817×947 81.3 KB

Screenshot 2024-12-02 at 09.23.00.png
Screenshot 2024-12-02 at 09.23.00.png418×859 52.9 KB

2

Hello,

Please share “Store URL”

Thanks!

3

Hi,

Please share “Store Url”

Thanks!

4

https://excitarestudios.myshopify.com/

5

Hey, @JoaquinExcitare

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
@media (max-width: 768px) {
	.page-title {
		display:none !important;
}
}

Thanks!

6

Thanks for your respond, unfortunately the code doens’t work.
Mu website url is https://excitarestudios.myshopify.c

7

my url is: https://excitarestudios.myshopify.com/

8

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
@media(max-width:780px){
.page-title {
display:none !important;
 }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

9

Unfortunately the code does not work, title is gone on desktop but not on mobile.

10

Unfortunately the code does not work

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!