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

English Shopify Shopify Design
, , ,
1

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:

Dawn.png
Dawn.png424×259 65.8 KB

2

  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
3

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.

Venezimo_0-1684913464551.png
Venezimo_0-1684913464551.png1131×340 84.4 KB

4

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
5

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

6

Hi @Venezimo ,

Would you mind to share your URL website with password?

Thanks!

7

Hello @Venezimo ,

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

8

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

9

@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