How to change the heading size of the featured collection in mobile view only

Store Design
,

Topic summary

A user seeks to reduce the heading size of a featured collection specifically for mobile view on their Shopify store.

Two solutions provided:

  1. PageFly-Noah’s approach:

    • Navigate to Online Stores > Themes > Edit code
    • Locate the theme.liquid file
    • Add custom code above the tag
    • Includes markup/CSS snippet for implementation

  2. ZestardTech’s CSS method:

    • Access Shopify Admin > Online Store > Themes > Actions > Edit Code
    • Open Asset > base.css file
    • Add media query targeting max-width 767px (mobile devices)
    • Apply font-size: 25px !important to .collection__title h2 selector

Both solutions use CSS to target mobile viewports while leaving desktop styling unchanged. The discussion remains open with no confirmation of which method the original poster implemented.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

url: makerlab-electronics.com

1 Like
2

This is Noah from PageFly - Shopify Page Builder App

Please add code here to change it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media (max-width:767px){
.collection__title h2{
  font-size: 25px !important;
}
}

ZestardTech_0-1713762969896.png
ZestardTech_0-1713762969896.png1251×788 90 KB