Debut Theme: collection / collection list pages - move text to below the image

Solved
Lenny1
Shopify Partner
2 0 1

I've searched and searched and whilst I found the solution for the landing page collection name to show under the image, I just can't get it to work on the collection page and collection list pages.

can someone please help with some code?

I've just realised that it works on the landing page if a short collection name is used but it then has issues with longer names.

thanks for any help on this - I've seen lots of people asking similar questions yet not getting a response to most - maybe it should be put as an option in the theme itself!?

 

Lenny

 

photographer/editor/digital stuff bits and bobs ;-)
Accepted Solution (1)

Accepted Solutions
Jasoliya
Shopify Expert
4382 574 1104

This is an accepted solution.

HI @Lenny1 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 .collection-grid{    overflow: initial;}
 .collection-grid-item__title-wrapper::before{    background-color: transparent;}
 .collection-grid-item__title{bottom: 0; top: 100%; color: black; text-shadow: none; font-weight: normal;}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 12 (12)
Tiana_R
New Member
1 0 0

Hi Lenny

 

Sorry this doesn't answer your question but I need your help :).

 

Currently the text on my home page collections shows on top of the image but I would like to put the text BELOW the image.

Below Image.PNG

May you please share your solution?

 

Thank you

 

Jasoliya
Shopify Expert
4382 574 1104

This is an accepted solution.

HI @Lenny1 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 .collection-grid{    overflow: initial;}
 .collection-grid-item__title-wrapper::before{    background-color: transparent;}
 .collection-grid-item__title{bottom: 0; top: 100%; color: black; text-shadow: none; font-weight: normal;}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

madari21
Excursionist
23 0 3
madari21
Excursionist
23 0 3

hi how can I change the text size for Mobile view only?

Jasoliya
Shopify Expert
4382 574 1104

Send your store url

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Jasoliya
Shopify Expert
4382 574 1104

you have already title at bellow image

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
madari21
Excursionist
23 0 3

hi how can I change the text size for Mobile view only?