Display collection title lower in Debut theme

Highlighted
Tourist
19 0 1

Hi Shopify Designers,

For this moment, in Debut theme, I am trying to lower the collection title because it merged inside the collection image which makes customers really hard to see. The following screenshot is the illustration:

As you can see above image, the word "Your collection's name" inside the image is very hard to see. Therefore, I need to lower the name to make it display outside the image as shown:

As you can see, I want the name have to be outside the image which means the name will be changed to text type. I wonder if anyone could instruct me the method to adjust it? I would respect and appreciate for that.

Thank you very much,

Best,

Tino Huynh

0 Likes
Highlighted
Shopify Partner
23 0 11

Hi Tino,

Give us your Store front password so we can give you css code for you have issue.

Support@PSDCenter.com || www.PSDCenter.com || Themes.PSDCenter.com
0 Likes
Highlighted
Tourist
19 0 1

This is my website password: dreaff

0 Likes
Highlighted
Shopify Partner
23 0 11

Hi Tino,

copy below css code and paste it first line of assets/theme.scss.


.collection-grid {

overflow:hidden !important;

}
.collection-grid .collection-grid-item__title {
  transform:none;
  top:auto;
}

Support@PSDCenter.com || www.PSDCenter.com || Themes.PSDCenter.com
Highlighted
Tourist
19 0 1

It worked!!! Thank you thousand times!!

0 Likes
Highlighted
Shopify Partner
23 0 11

You are welcome!

Support@PSDCenter.com || www.PSDCenter.com || Themes.PSDCenter.com
0 Likes
Highlighted
New Member
1 0 0

Hi, 

I'm hoping you could helpe me with a similar issue. 

I am using the Debut theme and when I add this particular code, it moves the title to the bottom but unfortuntaly cuts of the second line. 

Ex. In the image attached, it should 'Christmas Stockings'. 

Any help is very appreaciated! 

Thanks, 
Natasha 

 

 

0 Likes
Highlighted
New Member
3 0 0

I’m having the same issue as Natasha. It’s cutting off some of the words. Help please.

0 Likes
Highlighted
Tourist
14 0 2

You can change the following:

.collection-grid-item {
    margin-bottom: 30px;
}

to

.collection-grid-item {
    margin-bottom: 90px;
}

Alternatively, you can change the font size by adding "font-size: 16px;"  under ".collection-grid-item__title".  You will need to adjust the font size to your liking.

 

0 Likes
Highlighted
New Member
2 0 0

Hi,

 

I am looking to move the text down by an inch but keep in within the image frame.  Any help is greatly appreciated

 

Move text down.png

0 Likes