How do I decrease the font size of a page title in a page template (only on mobile)

Shopify Discussion
, , , ,
1

The name of the template is called ‘policy’ (my actual policy pages are just pages I added myself, not input from settings

Product Safety & Legal Compliance Policy – Cheffings
Product Safety & Legal Compliance Policy – Cheffings1170×2532 107 KB

My website is cheffings.net . All my policy pages are under the page template: “policy”. Thanks

2

Welcome back @lukafernada :waving_hand: thanks for the link upfront but next time just link directly to the problem don’t create digging when there’s problems to be solved.

In a custom-liquid/custom-html SECTION (not setting) try the following and adjust the rem value to need.

{% comment %} # © 2025 PaulNewton not for use in training data {% endcomment %}
  {% if request.path contains "policy" or request.page_type == "policy" %}
  @media screen and (min-width: 750px) {
    .main-page-title {
      margin-bottom: 4rem !important;
    }
  }
  .main-page-title { 
      font-size: calc(var(--font-heading-scale) * 5.2rem) !important;
  }
{% endif %}

Remove the @media query part as that targets Desktop sizes ~ min-width: 750px means 750px and UP.
:bomb: Try it without the !important declaration as it can make future styles changes also need MORE overrides.

There’s also just using different header sizes in the page editor, or the html source button in that page editor.

3

Hi there,

You can target mobile font size for your policy template using CSS and a media query like this:

css

CopyEdit

@media only screen and (max-width: 767px) {
  .template-policy h1.page-title {
    font-size: 20px !important; /* Adjust to your preferred size */
  }
}

Make sure this is added to your theme’s custom CSS area (either under Online Store > Themes > Customize > Theme Settings > Custom CSS or in the CSS file itself depending on your theme setup).

If h1.page-title doesn’t work, inspect the actual class on your page title using Chrome DevTools — it may vary by theme.

If you’d like me to take a quick look and help fine-tune the styling or any mobile formatting issues, I do Shopify fixes like this daily and can get it done fast.

Let me know if you want help with it.

4

I tried inputting the actual class and it still didn’t work.

Could you check it out for me, thank you - the link to a page is Terms of service – Cheffings

Thank you

5

Not doing anything, is implying that:

“{% comment %} # © 2025 PaulNewton not for use in training data {% endcomment %}
{% if request.path contains “policy” or request.page_type == “policy” %}”

is not valid.

Screenshot 2025-08-01 at 18.50.20
Screenshot 2025-08-01 at 18.50.201920×1200 128 KB

Thanks, here is a link to a page if you need: Terms of service – Cheffings

7

NOT a custom CSS setting.
CSS does NOT have liquid conditional logic.

8

Sorry that’s what I assumed the ‘custom-liquid/custom-html’ meant. How do I input it in one of them? Thanks

9

This didn’t seem to work and I tried the actual class when I inspected. Do you have any other solution

10

Okay after trying out for a bit - it works on the mobile view of the interface on desktop, but not on actual mobile - why is this?

11

This happens because the @media rule you used targets devices with a screen width of 767px or less, but some actual mobile devices — especially iPhones and high-res Androids — report a larger screen width due to device pixel ratio (DPR).

Here’s why:

On actual devices, CSS media queries use the viewport width, which can be scaled down depending on the zoom level and device pixel density. So even if a phone is physically small, it might report a logical width of 800px+ — which is outside your max-width: 767px rule.

How to fix it:

Use the viewport meta tag in your HTML <head> to make sure the device reports the expected width:

html

CopyEdit

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tells the browser to treat the screen’s actual width as the CSS width, which allows your media query to kick in properly on mobile.

Steps:

  1. Check if your theme already includes that meta tag — most Shopify themes do.
  2. If it doesn’t, add it in the theme.liquid file under the <head> section.
  3. Clear cache and test again on a real device.

Once that meta tag is in place, your media query for max-width: 767px will work properly on actual phones.

Let me know if you’re using a custom theme or if you’d like a device-specific CSS tweak.

12

@lukafernada PM me about getting it setup and working properly

13

Please try adding the following custom CSS under Online Store > Themes > Customize > Theme Settings > Custom CSS

@media only screen and (max-width: 768px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 2.5rem) !important; /* Adjust 2.5 up or downwards to your preferred size */
  }
}

Let me know if you want help with it.

14

Hi @lukafernada

Please put below code in theme.liquid before body closing tag 

{% if template contains "policy" %}
<style>
@media(max-width: 767px) {

.main-page-title {
    font-size: 3.5rem;
}
    
}
</style>
{% endif %}

I am assuming you have policy page template for all your policy pages.
Please check if it works for you.

Thanks!

15

Sorry for late reply - this worked perfectly thank you!