Resizin collection description

[radaApeta]

Hello,

pretty dumb question, but i didnt find it nowhere. I would like to resize the description in all my collections. I want it to be smaller. Thank you 

https://81e325-28.myshopify.com/
0007

[Small_Task_Help]

At theme.scss.liquid, styles.css.liquid, or similar

Add or modify CSS rules

CSS example

.collection-description {
  font-size: 16px; /* Adjust the size as needed */
}

Ensure that any changes you make look good for all the devices

[niraj_patel]

Hello @radaApeta 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
.collection-hero__description {
max-width: 100% !important;
}
.collection-hero__title+.collection-hero__description {
font-size: 14px !important; /*adjust according to you*/
}
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Rahul_dhiman · Accepted solution]

Hello @radaApeta 
Go to online store ---------> themes --------------> actions ------> edit code------->assets ---> component-collection-hero.css----> line number 51
search this code

@media screen and (min-width: 750px) {
.collection-hero__title + .collection-hero__description {
font-size: 1.8rem;
margin-top: 2rem;
margin-bottom: 2rem;
}

and replace with this code

@media screen and (min-width: 750px) {
.collection-hero__title+.collection-hero__description {
font-size: 13px;
margin-top: 2rem;
margin-bottom: 2rem;
}
}

 and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[Sweans]

Hi @radaApeta ,

If you need to reduce the size of all collection description in your website easily, follow the steps given below.

Go to your Shopify Admin Dashboard.

>Navigate to Online Store > Themes.

>Find your active theme and click on "Actions" -> "Edit code".

>In the "Assets" folder, open the CSS file (e.g: base.css, theme.css, or another relevant file).

Add the following CSS at the bottom of the file:

@media screen and (min-width: 750px) {

    .collection-hero__title+.collection-hero__description {

        font-size:16px!important;

    }

}

@media screen and (max-width: 750px) {

.collection-hero__title+.collection-hero__description {

        font-size:14px!important;

    }

}

Result:-

Regards,
Sweans