Dawn Theme: Center collection title inside image

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 14 (14)

solverStaff
Shopify Partner
359 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 116

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

LeoEcom
Shopify Partner
96 8 19

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

 

 

 

 

Build/Design/Redesign store | Shopify SEO promotion

Contact me and I will help you


Was my reply helpful? Click Like to let me know!

Loftsoul
Tourist
8 0 1

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
Shopify Partner
705 75 116

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?

krishnatulasi
Tourist
3 0 0

Thanks @Dbuglabpvtltd

This worked for me too.

Jahid-KlinKode
Excursionist
145 1 5

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.