How to fix double tap hover issue on iOS in Wordpress

user_19872727 0
Viewed 51

I am working on a website: mariekevancamp.com which is using the wordpress theme espied. The main page consists of multiple square tiles. To open a project you need to click on the tile. This works on android devices. However on iOS you need to double tap to open the project, which is not what I want. Apparently this is not a bug but a kind of implementation that is supposed to happen on iOS when you have a hover effect on a link with visibility or display. Is there any way to fix this with just the wordpress CSS editor? I like the hover effect, but I would like to immediately go to the project’s page after one click. If this is not possible in iOS, is there a way to remove the hover effect by adding some code in the CSS editor (additional CSS)?

wordpress-theming wordpress double-click hover css
1 Answers

Add this CSS:

@supports (-webkit-touch-callout: none) {
   /* CSS specific to iOS devices */ 
    .js .page-template-page-templatesportfolio-page-php .jetpack-portfolio .image-link {display:block !important;}
    .js .page-template-page-templatesportfolio-page-php .jetpack-portfolio .view-link {opacity: 1 !important;}
    .js .page-template-page-templatesportfolio-page-php .jetpack-portfolio .post-thumbnail-wrapper {background-color: #007cad !important;}
}
user_179955630
Related