How can I adjust the header font size for mobile view only?

Store Design
1

I need to change the size of the header font on mobile only on my Shopify website.

I’ve used a custom font with Fontify.

Currently the text wraps onto a new line (image below)

mobile.jpg
mobile.jpg774×1638 69.2 KB

2

Hey @JamesMoruzzi

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hi Moeed,

Preview link:

https://us2ph9qvheptgxg3-77823344970.shopifypreview.com

I don’t think it’s password protected but can’t work out how atm.

Will look if needed.

4

Hey @JamesMoruzzi

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

RESULT:

Moeed_0-1712221548124.png
Moeed_0-1712221548124.png371×678 45.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

@JamesMoruzzi

Please add the following code at the bottom of your CSS file.

@media screen and (max-width: 767px) {
h2.rich-text__heading.rte.inline-richtext.hxl.scroll-trigger.animate--slide-in {
font-size: 34px;
}
}