Essential grid - always show content on mobile

Support
#1

Hi there,
For a website that will go live soon, I’ve added an essential grid. The idea is that the content of the grid will be visible on hovering. Since there’s no hover option on mobile/tablet, the content should always be visible on these devices. I’ve managed this issue before, without problems (by adding the css and js. as described on the Theme Punch website), but this time I can’t get it working.

Hope anyone can help me out (details follow in next message)

Kind regards,
Marleen

#2

Hey,

I have checked your site and you can fix it removing this custom CSS code: http://prntscr.com/gnwrog

#3

Hi John,

Thanks for mailing!
I’ve removed it, but the grid is still showing the same on mobile/tablet and desktop. It’s showing the desktop version everywhere. Content (the title) should be always visible on mobile/tablet.
Hope there is another solution.

Kind regards,
Marleen

#4

Hello Marleen,

Thanks for writing in! To resolve your issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 979px){
    .esg-entry-cover,
    .esg-entry-cover .esg-overlay {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

Hope this helps. Please let us know how it goes.

#5

Adding the css did the trick!
Thanks :))

#6

Glad to hear it,

Cheers!