Collection Description Too Large & Narrow - Dawn Theme

Store Design
,

Topic summary

Issue: The collection page description in the Dawn theme appears excessively large and constrained in a narrow column.

Context: Helpers requested the store URL and clarification; the store link was provided. No password was needed.

Proposed fix (CSS):

  • Edit the theme’s CSS file (base.css or theme.css).
  • Add a media query for desktop screens (min-width: 750px) targeting the collection description immediately following the title: .collection-hero__title + .collection-hero__description.
  • Set width and max-width to 100% and adjust font size to 1.6rem.

Effect: On larger screens, the collection description expands to full width and uses a smaller, consistent font size. Before/after images and a code snippet are central to understanding the solution.

Outcome/Status: A concrete code solution was provided with step-by-step guidance and an example result. The original poster has not yet confirmed the fix, so resolution is pending user feedback.

Summarized with AI on December 23. AI used: gpt-5.
5
  • Here is the solution for you @misshan88
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media screen and (min-width: 750px) {
    .collection-hero__title+.collection-hero__description {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 1.6rem !important;
    }
}
  • Here is the result you will achieve:

BSSTekLabs_0-1722009197140.png
BSSTekLabs_0-1722009197140.png1896×865 208 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like