Product titles running over images on my main collection page

Store Design
, ,
1

Hi all,

Is anyone able to help me with the coding changes I need to stop my collection titles from running over my images on the front page of my website? It’s not too bad on the mobile version but desktop they are all over the place. I’ve made changes to the code before to put the titles under the images not on top of them, but they are now not far enough under the images for some of the longer titles.

Many thanks

website is: nudierudielunchbox.com.au

2

Hello @Julia_B
I would like to give you some recommendations to support you
You can try follow this path:
Themes => edit code => asset => theme.scss.css
and add this code to bottom of the file theme.scss.css:

.sbs-image:nth-child(3) .feature-copy-holder.with-cta,.sbs-image:nth-child(4) .feature-copy-holder.with-cta{
bottom:-172px !important;
}
.sbs-image:nth-child(1),.sbs-image:nth-child(2){
margin-bottom:70px !important;
}
@media (max-width: 1199px) and (min-width: 992px){
.sbs-image:nth-child(1),.sbs-image:nth-child(2){
margin-bottom:92px !important;
}
.sbs-image:nth-child(3) .feature-copy-holder.with-cta,.sbs-image:nth-child(4) .feature-copy-holder.with-cta{
bottom:-125px !important;
}
}

Hope my recommendation can works and support for you!
Kind & Best regards!
GemPages Support Team

3

Hi @Julia_B ,

This is PageFly - Free Landing Page Builder.

Please help me to add this code, I used a bit JS for your longer title

section.featured_collections .grid__item a { margin-bottom: 20px; }

Best regards,

PageFly

4

Hi,

I’d like to give this a try,

Julia

1 Like