How to make collection header smaller

[xavierluca]

how do i change my header size for collection list. now its too big i want it to be 26px on desktop and 22px on mobile

[xavierluca]

yes please help me

[topnewyork]

Hello,

Please share "Store URL"

Thanks!

[xavierluca]

hey, its not live yet how can i share the url of the new site im working on?

if i send you the url ofthe preview version you will end up on the live website...

[Moeed]

Hey @xavierluca 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[xavierluca]

i texted you on whatsapp

[Moeed]

Hey @xavierluca 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
h1.collection-hero__title {
    font-size: 26px !important;
}
}
@media screen and (max-width: 767px) {
h1.collection-hero__title {
    font-size: 22px !important;
}
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[rajweb · Accepted solution]

Hey @xavierluca ,

To adjust the header size for your collection list, you can do this through your theme's CSS file. Here’s how you can achieve the desired font sizes:

1. Locate the Header Element:

Identify the class or ID of the header for your collection list. You can use your browser's developer tools (right-click the header, then select "Inspect") to find it. It might look something like .collection-header.

2. Add or Modify the CSS:

Once you've identified the class or ID, update your CSS. Open the theme's CSS file or a custom CSS section (if your theme supports it), and add the following styles:

/* Adjust header size for desktop */
.collection-header {
  font-size: 26px; /* Set font size for desktop */
}

/* Adjust header size for mobile */
@media (max-width: 768px) {
  .collection-header {
    font-size: 22px; /* Set font size for mobile */
  }
}

3. Apply the Changes:

- If your theme has a custom CSS editor (in Shopify: Online Store > Themes > Customize > Theme Settings > Custom CSS), paste the code there.

- Alternatively, add the code to the appropriate CSS file in your theme. Typically, it’s in assests/theme.css or assets/sstyle.css.

Let me know if you need help identifying the header class or further instructions!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[xavierluca]

hey thanks but it did not change anything for me...

i added this code to the custom css and did not change