i have tried several codes trying to fix my collection page text width on my Craft theme. on flickerandtwinkle.com can someone tell me what i’m doing wrong. I pasted the codes to the bottom of the base.css but nothing changed
Topic summary
Issue: The collection page description text in the Craft theme appears too narrow; the author tried adding CSS to base.css but saw no change.
Context: A responder asked which text is affected (likely the collection description). Another explained the width is intentionally constrained by a CSS rule (approx. 2/3 width on desktop/tablet) for readability, referencing Shopify’s component-collection-hero.css.
Proposed solutions:
- In the Collection banner section → Custom CSS, add: .collection-hero__description { max-width: none; } to remove the width cap.
- Or in Online Store → Themes → Edit code → Assets → base.css, add (for ≥750px screens): @media screen and (min-width: 750px) { .collection-hero__description { max-width: 100% !important; } }
Other input: One participant advised changing the theme entirely (subjective, no technical fix).
Notes: Screenshots were attached but are not essential to apply the CSS changes. The thread links to the Dawn theme CSS where the limiting rule exists.
Status: No confirmation from the original poster; outcome unresolved.
1 Like
What text? You mean the Description? What code didn’t work?
If I understand properly, here is the rule which limits collection description width so that on desktop and tablet, collection description is not full-width, but about 2/3:
Generally, this makes sense as it’s proven that reading overly wide lines of text is uncomfortable.
If you wish, try adding code like this to the “Custom CSS” setting of “Collection banner” section:
.collection-hero__description {
max-width: none;
}
1 Like
Hi!
I recommend changing your theme as soon as possible. The Craft theme you are using is not good and will waste a lot of your time.
Best regards and good luck with your project!
2 Likes
Hi @user3616
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottow of the file:
@media screen and (min-width: 750px) {
.collection-hero__description {
max-width: 100%!important;
}
}
