How to change font size of product title in product grid for mobile only

Store Design
, , ,

Topic summary

Problem: Product title font size in the product grid won’t change on mobile in the Atlas theme (desktop changes work). The OP suspected .card__heading but couldn’t affect mobile styling.

Likely cause: A mobile-specific CSS rule is overriding desktop rules. One reply identified a separate @media (max-width: 768px) block controlling the mobile title and suggested editing within that scope.

Proposed fixes tried (unsuccessful so far):

  • Add a mobile media query targeting a specific title class (.ai-product-title-…); tested at 768px and 767px breakpoints with !important. No effect.
  • Add a mobile media query at 749px targeting .card__heading h2/h3 in theme.css/base.css. No effect.
  • Target the same specific class in base.css at 749px. No effect.
  • Search and edit #block-heading-title within a mobile @media block; the OP couldn’t find this selector in the code.

Most recent guidance: Place the mobile override in Assets > custom.css instead of base.css, using a mobile @media query targeting the correct selector.

Notes: Screenshots indicate a mobile-only CSS rule is key; correct selector, breakpoint, and stylesheet placement are critical.

Status: Unresolved; awaiting results after moving the override to custom.css and confirming the exact mobile selector.

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

I have tried everything I can think of, watched tutorials on similar things, and consulted AI but I could not find an answer to this problem. I’m pretty sure the class of it is .card__heading but no matter what I do, it won’t change size. I have found code that lets me change the size of the title on desktop, but it doesn’t change on mobile. I don’t understand. If anyone knows how to fix this, I would greatly appreciate it. I’m using the Atlas theme and my website is familyframe.co

1 Like
2

Hi @truemonkeman
Please try below code:
Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

@media screen and (max-width: 768px) {
    .ai-product-title-an0fqmk1pvm9xu1z1caigenblock2a4e2b8nhawah {
        font-size: 16px !important;
    }
}
3

It sadly did not work

4

Hi @truemonkeman ,

We have checked your site and see the exact issue you’re facing. The problem is a separate CSS rule for mobile devices as in our screenshot for your site.

To fix this:

  1. First, search for #block-heading-title in your Online Store’s ‘Edit Code’ section, then find all the results.

  2. Edit it to the size you want inside the CSS rules that are within the @media (max-width: 768px) block. This is for the mobile browser. Please make the changes there.

Let us know if you’re able to fix it.

Good luck!

image
image1911×915 117 KB

5

Can you please try this one as there was minor mistake with screen size
@media screen and (max-width: 767px) {
.ai-product-title-an0fqmk1pvm9xu1z1caigenblock2a4e2b8nhawah {
font-size: 16px !important;
}
}

6

Hello, @truemonkeman

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 screen and (max-width: 749px) {
  .card__heading h3, .card__heading h2 {
    font-size: 1.4rem; - Adjust this value to your desired size 
  }
}

Thank You!

7

Hi @truemonkeman

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
@media screen and (max-width: 749px) {
  .ai-product-title-an0fqmk1pvm9xu1z1caigenblock2a4e2b8nhawah {
    font-size: 15px !important;
  }
}

image
image374×545 83.8 KB

Best regards,
Devcoder :laptop:

8

image
image314×183 10.2 KB

Unfortunately, I wasn’t able to find this in my website’s code. I’m not sure how or why

9

This code did not work either

10

Unfortunately, this did not work

11

Sadly, this did not work

12

Hi @truemonkeman

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > custom.css and paste this at the bottow of the file:
@media screen and (max-width: 749px) {
  .ai-product-title-an0fqmk1pvm9xu1z1caigenblock2a4e2b8nhawah {
    font-size: 15px !important;
  }
}