I want to reduce the size of my collections titles on mobile only

Store Design
, ,

Topic summary

Goal: reduce the collection page title font size on mobile only to 20px.

  • Initial advice set .collection-hero__title to 20px in base.css, which also affected desktop.
  • Update: corrected to a mobile-only solution using a CSS media query targeting small screens:
    @media screen and (max-width: 768px) { .collection-hero__title { font-size: 20px !important; } }
    This applies the change only on devices with screen width ≤768px. (Media queries let CSS rules apply based on device characteristics like width.)
  • Screenshots were shared to show the before/after result.
  • Another participant requested the store URL; a similar alternative media-query snippet was also suggested.

Outcome: A clear, actionable mobile-only CSS fix was provided. No explicit confirmation of resolution from the requester; discussion appears open pending their feedback.

Summarized with AI on December 12. AI used: gpt-5.
1

Hi,

I want to reduce the size of my collection title in my collection page on mobile only. (I want it to be at 20px)

Thanks

2

Hello @imazele
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.collection-hero__title {
font-size: 20px !important;
}

result

58.png
58.png1415×577 377 KB

If this was helpful, hit the like button and accept the solution.
Thanks

3

On mobile only not on desktop please!

4

Remove previous code and add this code:-

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (max-width: 768px) {
.collection-hero__title {
    font-size: 20px !important;
}
}

result

60.png
60.png390×818 80.7 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

Hello,
Please share “Store URL”
Thanks!

6

Hi @imazele ’

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:767){
.collection-hero__title {
    font-size: 20px !important;
 }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!