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

[chaletboutique]

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:

This is what I would like it to look like:

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

[made4Uo]

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. 

[chaletboutique]

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

[made4Uo]

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

[chaletboutique]

Where do you put this? 

[made4Uo]

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

[chaletboutique]

Sorry that didn't work 

[made4Uo]

Hi @chaletboutique,

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

[chaletboutique]

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

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

[Clanscape]

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 · 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]

this does nothing