Is it possible to change to code to have the Collections Description fill the whole page ?
Thank you for your help
This depends on your theme and possible with some CSS code.
Share a link to your store and preview password if one is set and someone will be able to help with this.
However – keep in mind that there are wide and ultra-wide monitors and reading very wide lines of text is not comfortable and is a bad User eXperience.
That said – for Dawn you can try adding this code to the “Custom CSS” setting of the “Collection banner” section:
.collection-hero__description {
max-width: none;
}
Thank you Tim for your answer. Where do I place the code:
<div class="collection-hero__text-wrapper">
<h1 class="collection-hero__title">
<span class="visually-hidden">{{ 'sections.collection_template.title' | t }}: </span>
{{- collection.title | escape -}}
</h1>
{%- if section.settings.show_collection_description -%}
<div class="collection-hero__description rte">{{ collection.description }}</div>
{%- endif -%}
</div>
It worked! But you’re right, now it´s too wide. Can I change the width from None to an amount that leaves a nice border on both sides. What I really don´t like is the text as a long paragraph on the left side.
I really appreciate your help!
Try adding this:
.collection-hero__inner {
--page-width: 750px;
}
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
That´s perfect if I could center it on the page 
Yeah, if you’re using a newer theme with the theme editor you can usually adjust the collection description width in the theme settings without touching code. What theme are you using? Most of them have a setting for content width or you can drag the description block to span full width in the customizer.
I´m using the theme Dawn
If you combine 2 rules:
.collection-hero__inner {
--page-width: 750px; /* not 7500 ! */
}
.collection-hero__description {
max-width: none;
}
I will look like this:
I personally, think that text-align: center looks cheep, but you can add add it to the second rule:
.collection-hero__inner {
--page-width: 750px; /* not 7500 ! */
}
.collection-hero__description {
max-width: none;
text-align: center;
}
to get this:
