when viewing the collection list page on mobile a black box appears over the collection thumbnail

Solved
Samplescents
New Member
9 0 0

when viewing the collection list page on mobile a black box appears over the collection thumbnail. I would like it to look the same as when viewing the page on a computer as it does not have this black box on computer. only when viewing from a mobile device, iv taken off password entry on my website so you can have a look. if you view it on a mobile device for some reason there will be a black box, this doesnt happen on desktop. https://samplescentsuk.com/collections 

0 Likes
PeanutButter
Shopify Partner
330 66 137

Hi there, what theme are you using?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
Samplescents
New Member
9 0 0

hello thanks for replying am using boundless

0 Likes
PeanutButter
Shopify Partner
330 66 137

Please try adding this add the end of your Assets/theme.scss.liquid file:

.collection-grid__title {
  opacity: 0;
  display: table-cell;
  vertical-align: middle;
  margin: 0 auto;
}

.collection-grid__link-overlay:hover .collection-grid__title, 
.collection-grid__link-overlay:focus .collection-grid__title {
    opacity: 1;
}
Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
Samplescents
New Member
9 0 0

thanks that has help make it so the black box isnt there the whole time but when i click on the collection the black box appear over the thumbnail for a bit.

0 Likes
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

My code was to create same behaviour in mobile than in desktop, which is title being shown on hover.  If you want to completely remove the title in mobile, then replace the code I send you before with just this:

.collection-grid__title {
  opacity: 0;
}

 

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
Samplescents
New Member
9 0 0

thanks that has sorted my problem 

0 Likes