Collection Titles Only Show Properly on Home Page. Debut Theme.

Semqessa
Tourist
17 0 3

I have been having an issue with my collection titles. I was able to get help in changing them so that the titles are displayed underneath the image, rather than on top. However, that change has only affected the collections shown on the home page. When I go to other collection pages it is still in the defualt settings. You can click 'shop all' to see the issue.

Site Link: https://shopsacredspace.us/

 

This is the css I have used in the bottom of my theme.css file:

.collection-grid {

overflow:hidden !important;

}
.collection-grid .collection-grid-item__title {
transform:none;
top:auto;
color: #000;
font-size: 19px;
}


@media only screen and (min-width: 750px){
.collection-grid-item {
margin-bottom: 60px!important;
margin-top: 30px!important;
}
}
.collection-grid-item__title-wrapper {
padding: 5% 0!important;
}

@media only screen and (max-width: 750px){
.collection-grid-item {
margin-bottom: 60px!important;
margin-top: 30px!important;
}
.collection-grid-item__title-wrapper {
padding: 6% 0!important;
}
}
.collection-grid-item__title {
text-shadow: 0 0 black!important;
font-size: 19px;

}

dmwwebartisan
Shopify Partner
5827 1334 1711

@Semqessa 

If you want to apply your CSS code for the home page only then add ".template-index" in the front of your CSS classes like the below.

.template-index .collection-grid {
overflow:hidden !important;
}

.template-index .collection-grid .collection-grid-item__title {
transform:none;
top:auto;
color: #000;
font-size: 19px;
}


@media only screen and (min-width: 750px){
.template-index .collection-grid-item {
margin-bottom: 60px!important;
margin-top: 30px!important;
}
}
.template-index .collection-grid-item__title-wrapper {
padding: 5% 0!important;
}

@media only screen and (max-width: 750px){
.template-index .collection-grid-item {
margin-bottom: 60px!important;
margin-top: 30px!important;
}
.template-index .collection-grid-item__title-wrapper {
padding: 6% 0!important;
}
}
.template-index .collection-grid-item__title {
text-shadow: 0 0 black!important;
font-size: 19px;

}

 

Hope this helps.

Thanks!

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes