Increase Title Font size on Collection Page for Mobile View

Store Design

Topic summary

A user seeks to increase the title font size and make it bold on their collection page specifically for mobile devices, as it currently appears too small.

Three solutions were provided:

• BSSCommerce-HDL: Insert custom CSS code in the theme.liquid file above the </head> tag

• Dan-From-Ryviu: Add CSS through the theme customizer’s Custom CSS section (Theme settings > Custom CSS) targeting screens up to 749px width with 28px font size

• GTLOfficial: Modify the base.css file at line 2638, replacing existing media query code to set 25px font size and bold font-weight for h1 elements on screens up to 767px

All solutions use CSS media queries targeting mobile viewports and include code snippets. The discussion remains open with no confirmation from the original poster about which solution was implemented or whether the issue was resolved.

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

Hi,

I was looking for code to increase the Title font size on my collection page for mobile devices. Right now it shows very small and i also want it in Bold. See attachment below.

website: www.liftchairheaven.com

Allen6224_0-1720133424796.png
Allen6224_0-1720133424796.png419×674 39 KB

1 Like
2

Hi @Allen6224 ,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1720142985635.png
BSSCommerceHDL_0-1720142985635.png478×564 40.9 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:

1 Like
3

Hi @Allen6224

Please go to Online Store > Themes > Customize > Theme settings, open Custom CSS, paste this code and click Save

@media (max-width: 749px) {
.collection-hero__title { font-size: 28px !important; }
}
4

Hello @Allen6224

Go to online store ---------> themes --------------> actions ------> edit code------->base.css -----> line number 2638
search this code

@media (max-width: 767px) {
h1, {
font-size: 14px; /* Adjust title font size */
}

replace with this code.

@media (max-width: 767px) {
h1, {
font-size: 25px;
font-weight: bold !important;
}
}

and the result will be

4.png
4.png386×550 27.5 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks