How can I change the font size for mobile on my collection section in Dawn theme?

I want to change the size of the font on my mobile site of the collection description in my dawn theme. It should be smaller so the collections look all the same.

Another option would be to delete the arrows and make a small “zoom in” into the words if this is possible.

Can someone help me here?
Thanks :grin:

  1. In the theme editor, locate and click on the “Collection” section.

  2. Look for the settings related to the collection description. It might be under a heading like “Collection Page” or “Collection Description”.

  3. Depending on the available options in your theme, you can either adjust the font size directly or use custom CSS to override the default styles.

    • If there’s an option to change the font size, adjust it to your desired size and save the changes.
    • If there’s no direct option, look for a “Additional CSS” or “Custom CSS” field where you can enter your own CSS code. Use the following CSS snippet as an example and modify the font size as needed:
@media only screen and (max-width: 767px) {
  .collection-description {
    font-size: 14px; /* Adjust the font size to your preference */
  }
}
​
1 Like

I’m using the Dawn Theme.
I can’t finde any option to change the size.
Andy i tryed using the code but it didn’t change anything.

Hello @Venezimo ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets → base.css file → add this following code at the bottom of page

@media (max-width: 767px) {
  .collection-description {
    font-size: 16px;
  }
}

Save and preview

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

1 Like

Hello @irene-vintage ,
I tried it but it didn’t change anything.

Hi @Venezimo ,

Would you mind to share your URL website with password?

Thanks!

Hello @Venezimo ,

I’m sorry for that. Have you tried to change the size in the code to the smaller one?

Hello @irene-vintage ,
i have but nothing is happening.

@Venezimo add below css into base.css file

@media (min-width:768px)
{
.collection-list__item.grid__item .card__heading:hover {
    font-size: 40px;
    transition: transform var(--duration-short) ease;
}
.card .icon-wrap {
    display: none;
}
}
1 Like