How to adjust font size for mobile

Shopify Discussion
, ,

Topic summary

A Shopify store owner seeks help adjusting font size for mobile users, sharing a screenshot of the problematic text.

Solutions Proposed:

  • websensepro suggests adding CSS media query code to theme.css/base.css targeting the specific scrolling image heading class with a 17px font size for screens under 768px width
  • DaisyVo recommends inserting similar CSS code into main.min.css, targeting gallery heading and subheading elements with 15px and 14px sizes respectively, including a result screenshot
  • AbdulHadi123 mentions using a script from Xeno Executor to resolve mobile font issues

Current Status:

The original poster reports that websensepro’s initial code doesn’t work. DaisyVo’s solution also fails for the product page specifically. websensepro provides a revised CSS snippet using a broader selector (> *) with 16.1px font size.

Key Technical Detail: All CSS solutions use @media(max-width:768px) queries with !important flags to override existing mobile styles. The discussion remains open as the issue hasn’t been fully resolved.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello guys, how can I adjust the font size of this text for mobile users?

1.png
1.png392×784 231 KB

1 Like
2

Hi @NikosBat

  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:768px){
.scrolling-image-heading-template--24500677214540__scrolling_images_NhJzhr h2 {
    font-size: 17px !important;
}
}

websensepro_0-1747999523873.png
websensepro_0-1747999523873.png413×549 94.6 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

1 Like
3

Hi @NikosBat

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file main.min.css and add this code at the end of the file

@media (max-width: 768px) {
.gallery-heading-template--24654172291404__ss_gallery_1_HEe4YM strong {
    font-size: 15px !important;
}
.gallery-subheading-template--24654172291404__ss_gallery_1_HEe4YM p {
    font-size: 14px !important;
}
}

Result

DaisyVo_0-1748000639577.png
DaisyVo_0-1748000639577.png366×647 151 KB

Best,

DaisyVo

Result

1 Like
4

There are multiple ways to adjust the font size on your mobile. Here’s the script on Xeno Executor that can be more than beneficial to make your mobile screen and font problem resolve.

1 Like
5

Hello Websensepro, thank for answering my question but that code does not work for me!

6

Thank you very much AbdulHadi123

7

Thaks DaisyVo, but this code does not work for my product page

8

Hi @NikosBat

  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:768px){
.scrolling-image-heading-template--24500677214540__scrolling_images_NhJzhr > * {
    font-size: 16.1px !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!