Removing Flatiron hover feature on mobile

Site URL: https://www.carolynarcabascio.com

Hi! I'm wondering if anyone can help with an issue I'm having on mobile specifically. I'm using the Flatiron template for my website https://www.carolynarcabascio.com

There is a hover effect on the grid that's native to the template, which I managed to turn off with custom code:

#grid .item.hovering .wrapper {
    opacity: 0 !important; 
}
#grid .item a div.wrapper div.project-title h3 {
  visibility: hidden;
  font-size: 0;
}

But I have not had luck removing this completely from my website when viewed on mobile (there is a gray bar that appears beneath each grid item). Does anyone know how to remove it?

Thanks!

5 hours ago, carrie_draws said:

Site URL: https://www.carolynarcabascio.com

Hi! I'm wondering if anyone can help with an issue I'm having on mobile specifically. I'm using the Flatiron template for my website https://www.carolynarcabascio.com

There is a hover effect on the grid that's native to the template, which I managed to turn off with custom code:

#grid .item.hovering .wrapper {
    opacity: 0 !important; 
}
#grid .item a div.wrapper div.project-title h3 {
  visibility: hidden;
  font-size: 0;
}

But I have not had luck removing this completely from my website when viewed on mobile (there is a gray bar that appears beneath each grid item). Does anyone know how to remove it?

Thanks!

How to replicate the issue on mobile