Solved

Dawn Theme: Collections List Text - Increase Text Size, Centre Text on Image, Opacity of Image

chaletboutique
Explorer
51 0 12

Hello,

I am transferring my site to the Dawn Theme.

On the homepage for the 'Collections List,'.

1. I'd like the text to be in the centre of the image. (At the moment, when you change the screen size, it moves around.)

2. I would also like to increase the size of the font. 

3. The opacity of the image changed a bit so the text is clear 

 

https://b14tw2fx7z14g31s-43786535076.shopifypreview.com 

This is what it currently looks like - the text is white and below the images:

What it is now.jpg

 

 

This is what I would like it to look like:

What I want it to be.jpg

Dawn Theme: Collections List Text - Increase Text Size, Centre Text on Image, Opacity of Image

Accepted Solution (1)
bryan76
Trailblazer
220 4 46

This is an accepted solution.

I was able to put the text on top of the Collection List image via putting this code at the bottom of base.css:

.collection-list__item .card__content {
    position: absolute;
bottom: 1;
pointer-events: yes;
}

 

you can change bottom: 1 to a 0 if you want the text towards the bottom instead of top.   The problem is that the image is not clickable, only the text since the text is above the image.   I am still working on making the image also clickable.     Hope this helps!   

View solution in original post

Replies 11 (11)

made4Uo
Shopify Partner
3833 716 1164

Hi @chaletboutique,

 

The other option you can have is using the richtext section. Remove the body and the button. You can also adjust the padding-bottom of the collection list and also the padding-top of the richtext to minimize space between theme. There should be an option to adjust the size of the richtext. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
chaletboutique
Explorer
51 0 12

I want an image and it doesn't give you the option to do that

made4Uo
Shopify Partner
3833 716 1164

Hi @chaletboutique 

 

I thought you meant the text "What our.." Anyway, you can use the code instead. This should adjust with the screen size change

 

.collection-list__item .card__content {
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.collection-list h3.card__heading {
    font-size: 9rem;
    text-align: center;
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
chaletboutique
Explorer
51 0 12

Where do you put this? 

made4Uo
Shopify Partner
3833 716 1164

My bad. Please follow the instructions here

 

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the base.css
3. Paste the code below at the very bottom of the file.

.collection-list__item .card__content {
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.collection-list h3.card__heading {
    font-size: 9rem;
    text-align: center;
}
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
chaletboutique
Explorer
51 0 12

Sorry that didn't work 

Didn't work copy.jpg

made4Uo
Shopify Partner
3833 716 1164

Hi @chaletboutique,

 

I do not see the code. The code should be paste inside the base.css file at the very bottom

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
chaletboutique
Explorer
51 0 12

https://8b6debgm69cvpvq3-43786535076.shopifypreview.com

I pasted the code back in and this is what it is looking like:

Banner.jpg

Clanscape
Visitor
1 0 0

Hello, 

 

Just wondering if you found a solution that worked for this? I would like to change the collection list blocks in exactly the same way. I think the navigation would be far more obvious in Dawn if the design was as you suggested. Sorry I'm late to this thread!

bryan76
Trailblazer
220 4 46

This is an accepted solution.

I was able to put the text on top of the Collection List image via putting this code at the bottom of base.css:

.collection-list__item .card__content {
    position: absolute;
bottom: 1;
pointer-events: yes;
}

 

you can change bottom: 1 to a 0 if you want the text towards the bottom instead of top.   The problem is that the image is not clickable, only the text since the text is above the image.   I am still working on making the image also clickable.     Hope this helps!   

bryan76
Trailblazer
220 4 46

this does nothing