Dawn Theme: Center collection title inside image

[Loftsoul]

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?

[solverStaff]

Please provide your website URL

[Loftsoul]

Hi @solverStaff 

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

Password: beonow

[codewithpaul]

Add this CSS

```

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

```

Should do the trick

[Dbuglabpvtltd]

Hi @Loftsoul 
Can you please share your store URL?

[Loftsoul]

Hi @Dbuglabpvtltd 

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

Password: beonow

[LeoEcom]

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;
  }

[Loftsoul]

Hi @LeoEcom 

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]

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.

[Loftsoul]

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]

Hi @Loftsoul , 

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

[Snowsnow]

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

[StudioBlank]

Hello. @Snowsnow , I added this code in  card-collection.liquid   and closed it with   </a>   under   <div class="card__media">   as shown below. Try it and let me know!

<a href="{{ card_collection.url }}">

[AnassT]

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?

[krishnatulasi]

Thanks @Dbuglabpvtltd

This worked for me too.

[Jahid-KlinKode]

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.