Hello everyone, I’m finding that this has been answered before for different themes, but as a newbie, I’m still struggling to get this to work.
I can center it within the collection text box but I can’t center it on the actual page.
Please help.
Topic summary
Main issue: Center the collection description text on a Dawn theme collection page; it appeared centered in the editor but not on the live page.
Key steps and solution:
- Store URL was shared for troubleshooting. A screenshot was referenced but not essential.
- A CSS snippet was added to the theme stylesheet targeting the Dawn selector “.collection-hero__description” (the collection page hero description). It set max-width: 100% and text-align: center within a media query for screens ≥750px (desktop breakpoint).
Outcome:
- Desktop view was successfully centered after adding the CSS at the bottom of the stylesheet.
Latest update / open question:
- Another participant reports the mobile view remains unchanged, likely because the media query limits the rule to desktop. They requested guidance to apply the same centering on mobile (e.g., by adjusting or removing the media query, or adding a mobile-specific rule).
Status: Desktop resolved; mobile centering remains open without a posted solution yet.
Hey @1KNDclothing
Can you share your store URL?
Hey @1KNDclothing
Please add the following code at the bottom of your css,
@media screen and (min-width: 750px){
.collection-hero__description {
max-width: 100% !important;
text-align: center;
}
}
3 Likes
worked perfectly, thank you so much
1 Like
Hi! This code worked great for altering the desktop version of my site, but the mobile version remains the same. How can I apply these changes to mobile as well?