Not able to change heading sizes on product pages for mobile version!

[ethasis]

Hello,

I am not able to change the heading sizes on all product pages for mobile version.

Whispets.com

@ethasis 

[BrewBrains]

Hi @ethasis ,

You can add code by following these steps. 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid

You can change 30px to whatever size you want. The code below changes the product heading size below the screen size of 600px. 

<style>
@media only screen and (max-width: 600px) {
.product__title h1 {
    font-size: 30px;
}
}
</style>

If you need any further assistance or have any queries, feel free to contact me. 

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution and click like.

[ethasis]

Hello @BrewBrains 

The code is working for the main heading on the product pages for mobile version. However, I have several images with text and the headings are not changing in images with text for mobile version.

@ethasis 

[Anonymous]

Hello I can help you out message me privately for more discussion.

[PageFly-Amelia]

Hello @ethasis 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code 

@media (max-width: 767px) {
   main:has(.product.product--large) h1,
   main:has(.product.product--large) h2,
   main:has(.product.product--large) h3 {
      font-size: 28px; /* You can change the value of 28px to the value you want */
   }
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[ethasis]

Hello @PageFly-Amelia ,

De code does not work.
https://whispets.com/products/adjustable-vest-pet-harness?_pos=1&_psq=adjus&_ss=e&_v=1.0
The headings in the section: 'images with text' are not changing for mobile version. I have attached an example of a related product page.

@PageFly-Amelia 

[PageFly-Amelia]

Hello @ethasis 

Could you please test my code below again? I have just checked it again on your website.

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<style>
.title {
   font-size: 28px;
}
</style>

[ethasis]

Hello @PageFly-Amelia ,

The code is not working for mobile version. Please check the product page i shared.