Hi guys, I need some help with subtitle code I've added to my index items! I've added in the below code to add a subtitle to my index items and I'm happy with how it looks on desktop but when I look it on mobile the subtile is a bit too big! Any help would be much appreciated!
/*general config for subtitle*/
.index-section .index-item-title:after {
color: #FFFFFF;
display: block;
font-weight: lighter;
font-size: 20px;
}
@media screen and (max-width: 640px) {
h2.item-pagination-title.preFade.fadeIn {
font-size: 0.8rem;
}
}
/*set content for subtitle item*/
.index-section:nth-child(1) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(2) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(3) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(4) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(5) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(6) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(7) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(7) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(8) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(9) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(10) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(11) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(12) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(13) .index-item-title:after {
content: 'DISCOVER MORE';
}
.index-section:nth-child(14) .index-item-title:after {
content: 'DISCOVER MORE';
}