Hi,
I tried various codes, but I can’t fix my collection description to be centered. Can anyone help ?
Topic summary
A user is trying to center the collection description text on their Shopify store using the Dawn theme but hasn’t been successful with various CSS attempts.
Proposed Solutions:
Multiple community members offered CSS-based fixes, all targeting the .collection-hero__description class:
- Option 1: Add CSS to
base.csswithmax-width: 100% !importantwithin a media query for screens 750px and wider - Option 2: Insert custom CSS in
theme.liquidfile above the</body>tag - Option 3: Add CSS to
base.cssortheme.csswith centering properties includingmargin: 0 auto !important
Status:
The discussion remains open with no confirmation from the original poster about which solution worked. All responses provide similar CSS approaches with slight variations in implementation method and specific properties used.
Can you try add this to base.css
@media screen and (min-width: 750px) {
.collection-hero__title+.collection-hero__description {
max-width: 100% !important;
}
}
1 Like
Hey @Daniel19901
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
- Here is the solution for you @Daniel19901
- Please follow these steps:
- 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__description {
max-width: 100% !important;
}
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
Hello @Daniel19901 ,
Follow these steps:
-
Go to Online Store → Theme → Edit code
-
Open your base.css file and paste the following code at the bottom:
.collection-hero__description.rte {
margin: 0 auto !important;
}
Thanks