I have several images on our home page at: http://www.got2bmoving.com that when the user hovers over them that text appears. However when I view the page on the iPhone and tap the image nothing happens. When I implemented this same code and CSS using another theme (Showcase) I was able to see the text overlay when I tapped on the image on the iPhone.
Is there a way to configure the Enfold theme to enable the hover over effect on “click” on a touch screen? Or maybe there is some additional code I need to add?
Any help you can provide would be appreciated.
Thanks.
Hi Jane!
You can add following code to Quick CSS in Enfold theme options under Styling tab to display the text on mobile
@media only screen and (max-width: 767px) {
.outer > .box {
margin: 0;
}
Best regards,
Yigit
Hi Yigit, Thanks for your quick reply and suggestion. I added this css and the text still does not appear on the iPhone or iPad. The idea is that instead of the text appearing when I hover over that it will appear when I click.
I’m stumped about why it works in the Showcase theme and not in Enfold. If you have any more ideas, let me know.
Thanks.
Hey!
Please try flushing browser cache on your mobile device. I just checked your website on my iphone and it does work fine on my end. Please see screenshot here http://i.imgur.com/FxxU2lH.png
Best regards,
Yigit
Thanks, Yigit! What I think happened was I was testing this on the iPad and I had to change the 767px to 989px in the code you gave me. (at least I think that’s what it should be to cover both iPhone and iPad) Now I see the text appearing on iPad and iPhone. Thanks!