Dawn Theme: Center collection title inside image

Loftsoul
Tourist
8 0 1

Hi,

 

Im trying to do some customization to the Dawn theme and have created a Collection List for the homepage. The title for each collection is by default beneath the image. However, I would like it to appear aligned center "inside" the image. Like they have done on the front-page of nomadix.co.

 

Is there anybody out there who know if this would be possible to achieve?

Replies 13 (13)

solverStaff
Shopify Expert
358 40 69

Please provide your website URL

If my reply helpful then please Like to let me know!
If my answered is right according to your question, Mark it as an Accepted Solution.
Facing more issues ? Hire me For Quick Chat: Say hello in WhatsApp : +8801761469797
Loftsoul
Tourist
8 0 1

Hi @solverStaff 

 

My store-URL is https://loftsoulgolf.myshopify.com/

 

Password: beonow

codewithpaul
Shopify Partner
123 13 22

Add this CSS

```

.collection__title.title-wrapper { text-align: center }

```

Should do the trick

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme

Dbuglabpvtltd
Shopify Partner
705 75 113

Hi @Loftsoul 
Can you please share your store URL?

banned
Loftsoul
Tourist
8 0 1

Hi @Dbuglabpvtltd 

 

My store-URL is https://loftsoulgolf.myshopify.com/

 

Password: beonow

LeanidasEcom
Shopify Partner
91 7 18

Hello. Go to the theme code editor settings /find the base.css file / add the code at the bottom of this file:

 

 

h3.card__heading {
      text-align: center;
  }

 

 

 

 

Shopify Agency - STEP-MEDIA™
≈ Shopify SEO promotion | Create Shopify store high conversion ≈
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Loftsoul
Tourist
8 0 1

Hi @LeanidasEcom 

 

Thanks for helping out. I added the code but it did not do the trick, Do you have any other solution that might work?

Dbuglabpvtltd
Shopify Partner
705 75 113

Hi @Loftsoul 

.collection-list-wrapper .card.card--standard.card--media {
	position: relative !important;
}
.collection-list-wrapper .card.card--standard.card--media .card__content {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	right: 0 !important;
	left: 0 !important;
	margin: 0 auto !important;
	text-align: center !important;
}	
.collection-list-wrapper .card.card--standard.card--media .card__content .full-unstyled-link {
	color: #fff !important;
}



Please add following code in your css file.

banned
Loftsoul
Tourist
8 0 1

Thanks @Dbuglabpvtltd 

 

That did the trick, I also managed to style the size of the heading thanks to your advice. However, the image is not clickable anymore. Only the text itself leads to the collection page. Is there some way to make the whole image clickable again? 

neerajs
Tourist
4 0 1

Hi @Loftsoul , 

 

Did you solve the issue. Were you able to make the image clickable ?

Snowsnow
Tourist
3 0 0

Hi @Loftsoul @neerajs , has any of you managed to make the image clickable? I have the same issue. Thanks

AnassT
Visitor
1 0 0

Hello, this code worked well but the changes were only made on desktop, the mobile version remained the same. How can I make the changes for both?

Jahid-KlinKode
Excursionist
145 1 4

Hi @Loftsoul, learn how to center collection title inside images in the Shopify Dawn Theme with this concise YouTube tutorial: https://www.youtube.com/watch?v=LNCzj6cxw1s.