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
Topic summary
A user wants to reduce the font size of collection descriptions across their Shopify store.
Multiple CSS-based solutions were provided:
- Target file locations: Contributors suggest editing CSS in
theme.scss.liquid,styles.css.liquid,component-collection-hero.css(line 51), orbase.css/theme.cssfiles - Access path: Online Store → Themes → Actions → Edit code → Assets folder
- CSS approach: Modify the
.collection-hero__title + .collection-hero__descriptionselector with customfont-sizevalues (suggestions range from 13px to 16px) - Implementation options: Either add CSS to theme files directly or insert
<style>tags before</body>intheme.liquid
Key technical details:
- Use
@media screen and (min-width: 750px)for responsive design - Add
!importantflag if needed to override existing styles - Adjust font-size values according to preference
- Test changes across different devices to ensure proper display
The discussion remains open with no confirmation from the original poster about which solution worked.
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
Hello @radaApeta
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an 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
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