I want to reduce the size of my collection title on all my collection page

Store Design
, ,

Topic summary

Main issue: Reduce the font size of collection titles across all collection pages and be able to set the size manually.

Latest suggestion:

  • Edit theme files via Online Store → Theme → Edit code.
  • In theme.css or base.css, add a CSS rule that sets the collection title font-size to 20px with !important inside a media query for screens up to 767px wide.

Technical context:

  • CSS controls visual styles (e.g., font sizes).
  • A media query (@media max-width: 767) applies styles only on smaller screens (typically mobile).

Implications and next steps:

  • The provided code changes title size on mobile only; to affect desktop, add similar rules without the media query or with different breakpoints.
  • The font-size value (20px) can be adjusted to any preferred size.
  • Ensure the selector targets the collection title element used by the theme; otherwise, the rule may not apply.

Status:

  • No confirmation of success or further adjustments; the thread remains open with potential need for desktop styling or broader application.
Summarized with AI on December 12. AI used: gpt-5.
1

Hi,

I want to reduce the size of all my collection title on all my collection page (I want to be able to choose the size myself) : https://www.five-pocket.com/collections/fb-county

2

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!