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

ethasis
Tourist
37 0 3

Hello,

 

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

Whispets.com

 

@ethasis 

Replies 7 (7)

BrewBrains
Shopify Partner
137 22 28

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.

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Partner


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

ethasis
Tourist
37 0 3

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 

Not applicable

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

PageFly-Amelia
Navigator
346 105 149

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

ethasis
Tourist
37 0 3

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
Navigator
346 105 149

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>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

ethasis
Tourist
37 0 3

Hello @PageFly-Amelia ,

 

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