How do I reduce the size of the title for the Featured Collection for mobile only?

Shopify Discussion

Topic summary

A user needed to reduce the Featured Collection title size specifically for mobile devices on their Shopify store.

Solution provided:

  • Navigate to Shopify Admin → Online Store → Theme → Edit code
  • Locate the CSS file (base.css, theme.css, styles.css, or theme.scss.liquid)
  • Add custom CSS media query targeting screens with max-width 767px
  • The code sets the collection title wrapper h2 font-size to 15px with !important flag

Outcome:
The solution was successfully implemented and resolved the issue. The user confirmed it worked as intended.

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

How do I reduce the size of the title only on mobile?

Screenshot 2024-05-19 at 15.46.27.png
Screenshot 2024-05-19 at 15.46.27.png1192×1052 116 KB

2

Hi @GinaB2 , Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

deelsighthoundrescue.ie
Password DSR.

I just want to change it to smaller on mobile

4

Hi @GinaB2 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSTechVenture_1-1716130501923.png
BSSTechVenture_1-1716130501923.png1902×899 133 KB

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_2-1716130509953.png
BSSTechVenture_2-1716130509953.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (max-width: 767px) {
   .collection__title.title-wrapper h2 {
    font-size: 15px !important;
   }
}

Here is result:

BSSTechVenture_0-1716130475959.png
BSSTechVenture_0-1716130475959.png613×762 56.2 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

5

That worked. Thanks so much!

1 Like