I am using the Dawn theme and have turned on the Collection description. I have found no settings to adjust the width of the text to full page. It currently looks like this. How do I get it to go the entire width of the page? Thank you.
Hi @sweetstash
Add this code at the bottom of your base.css file in Online store > Themes > Edit code > Assets
.collection-hero .collection-hero__inner { max-width: 100%; padding: 0 10px; }
Thank you, but it did not change anything.
Try to update the code to this.
.collection-hero .collection-hero__inner { max-width: 100% !important; padding: 0 10px !important; }
I did as you said. Put the code on the very bottom of my bass.css file. No changes.
Here is the page
https://x-stitch-boutique.myshopify.com/collections/sweet-stash-fabric
Update code
.collection-hero .collection-hero__inner .collection-hero__description,
.collection-hero .collection-hero__inner { max-width: 100% !important; padding: 0 10px !important; }
You are spectacular! Thank you so much for helping me. It worked!
Very welcome
quick question - sorry. Here is the code I used:
/* Added to make the text on collections page look better: https://community.shopify.com/c/shopify-design/collection-banner-width/m-p/2321206 */
.collection-hero .collection-hero__inner .collection-hero__description,
.collection-hero .collection-hero__inner { max-width: 100% !important; padding: 0 200px !important; }
I got the main text to look how I wanted - but the header is still off kilter. Can you help? I’m so close!!! Gah!
https://www.fullheartart.com/collections/cards
This tag does make mobile barf big time though… 
Hi @Dan-From-Ryviu , I have a similar problem in the Dawn theme, where the text of the collection description on the collection banner is squished to the left instead of using the full width of the page. I tried pasting the code you provided in the bottom of my bass.css file, but unfortunately I don’t see any change. Here is what it looks like in the bass.css file:
Do you see anything wrong with how I’ve applied this code? Or do you have any other suggestions? Thanks!
Hi @delicioats
Could you share your page URL to check?
Sure, sorry about that. It’s in draft mode, but here is the preview: https://5pg5q0ckd8rgmlgj-55436836969.shopifypreview.com
To see the issue you’ll go to menu > shop > 2-flavor 6-packs
Please remove HTML in description of your collection to solve the issue.
Amazing! It worked, thank you! I didn’t even realize the description contained HTML.
For others who may be searching for an answer to the same problem, this is how I checked for and fixed this issue: From Shopify Admin go to Products > Collections then click on the collection with the issue to edit the collection.
Once on the edit collection page click the “Show HTML” button at the top left of the Description text box.
When I clicked it a lot of code appeared, rather than seeing just the plain text. I copied the actual plain text of the description, deleted all the HTML code, and with the “Show HTML” button still toggled, I pasted just the text into the Description text box.
I clicked the save button and then checked the collection page and the description was no longer squished to the left; it was spread across the entire width of the page, just like I wanted.
Now, @Dan-From-Ryviu , I’ve noticed since applying this fix that when I go back into the collection and click “Show HTML” again, there is HTML code there again instead of just the plain text. I guess it was somehow auto-added. I don’t know if it’s the same code as before, but I assume it’s not since the problem has not reoccurred. Is this normal, for HTML code to be auto-populated like that? Maybe there is something in what I thought was “plain text” that actually isn’t plain text? Perhaps the M-dash (long double-wide dash)? In any case, so far it doesn’t seem to be causing any issues. If it starts to then I’ll know where to start troubleshooting!
Thanks again, sir!