Site URL: https://www.heymutant.com
Hello!
I am currently checking my site for "responsiveness" and I have seem to have encountered a problem when visualising my site on a tablet device.
I have set up on"site styles" that the title for the product shows in an overlay mode when visiting the site from a desktop computer, but not when it's seen from a mobile device. When visiting the site from a mobile device, I have set up that the title appears below the image in the product block. This works when visualising the page from both desktop and a mobile phone, so all good here.
The issue is when I'm on a tablet: I can see the mobile version (the hamburguer menu, etc), and everything works, EXCEPT the titles on the shop page are not showing until I click on the product blocks - which I guess it shouldn't happen because that's the equivalent to a "hover".
At first I assumed it was a breakpoint issue, which I initially set up at 992px. I have tried changing that to either 768px and 1280px but it doesn't seem to change the way the titles are shown on a tablet. I have also tried removing all my custom code / css and it seems that the problem isn't rooted there, because I still can't see the product blocks with the title underneath when I "reset" the page back to the default version.
I am attaching some photos to illustrate the problem.
It's quite frustrating because I really like the text overlay effect on desktop and the title below also looks great on a mobile phone, but I wouldn't want to sacrifice the overlay effect so that the title always appears - therefore solving the problem.
Any help or advice would be greatly appreciated,
Have a good day everybody! 😀
Patri
PS:
My site is: www.heymutant.com
password: paginaweb