Trying to centre align collection banner description (Dawn theme)

[maleka]

Hey,

Hoping someone can help me, please!

Currently using Dawn theme. I am trying to centre align the description and header on my collection banner. On desktop I need the header and description centre to align and on mobile just the header needs to be centre aligned.

Mobile: Desktop:

My website is: maleka-uk.myshopify.com/collections/bags Password: Development123

Thanks in advance!

[Mr_RaviRaj]

@maleka

you store isn’t inspectable, kindly remove the debug option,
So that we can help you to provide the Solution,

1. Navigate to Online Store->Theme->Edit code
2. Asset->/component-collection-hero.cs ->paste below code at the bottom of the file.
3. Save it.

.collection-hero__title {
	text-align: center;
}
.collection-hero__description {
	margin: auto;
}

Thank you.

[maleka]

@Mr_RaviRaj Apologies, please try again. It should work now - thank you

[Usman-Ramzan]

Hello @maleka , here is your solution:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > component-collection-hero.css.liquid or component-collection-hero.css and paste this at the bottom of the file:

.collection-hero__title {
	text-align: center;
}
.collection-hero__description {
	margin: auto;
}

[maleka]

Thank you @Mr_RaviRaj and @Usman-Ramzan this worked perfectly!

[Mr_RaviRaj]

@maleka
Let me know if you need any more help,
Thank you

[maleka]

Thank you @Mr_RaviRaj

[Usman-Ramzan]

@maleka It’s my pleasure to help you!

[one2onegifts]

Hi, Is there away to use more of screen ? text is all very much squished into the middle ?

[delicioats]

I have the same problem, but the text is squished into the left side. Did you find a solution to this?

[missjo13]

This worked for me, thanks so much!!

[Rebecca7777]

Stumbled across this. I’ve watched so many videos spent hours trying to do it and this was clearly explained and worked thank you very much : )

[Usman-Ramzan]

It’s my pleasure to help you!

[crepscity]

Hi Usman,

I’m trying to add a “Read More / Read Less” toggle to the collection description on my Dawn theme store. Currently, the full description is always visible, but I want to:

• Show only two lines of text initially.
• Make the third line blurry.
• Include a “Read More” button that expands the full description when clicked.
• Include a “Read Less” button to collapse it back.