Blog Widget – It needs to tap two times on the photo on a mobile device

[ketzaldev]

Hi everyone,

Using the blog widget, I’m in a sort of dead-end. It works perfectly on desktop devices, but on mobile phone, when I want to access an article from the blog Widget, I need to type 2 times to enter the link.

I have enabled/disabled CSS effect on images, to see the behavior :

– with CSS effect enabled, the first tap I do on an article shows the css effect, as if it just a hover of the frame. The second tap opens the article

– with CSS effect disabled, first tap does nothing, second tap opens the article.

I haven’t found any option to change this. It would be awesome to prevent this, so the user can jump with one tap on articles.

If you want to check, here is an example : https://www.brunet-monie.com/art

Thank you so much in advance.

Louis

[gturinsky]

<p style=”text-align: left;”>What’s your mobile device? Your example work’s like a charm on my Pixel 7.</p>
Kind regards

Gerhard

[ketzaldev]

Hi Gerhard,

Thank you for your feedback. I tries with 2 iPhones, and the problem is here, didn’t try yet on Android.

[gturinsky]

Hi,

I did a bit searching and testing on Apple devices.

It’s not the safari browser which produces your problem, its the IOS System (I checked with Google browser on the iPad, it also does not work).

Perhaps you can give the solution shown here  a try:

https://wordpress.org/support/topic/some-mobile-users-need-to-click-twice-to-add-products-to-cart/

Kind regards

Gerhard

 

[ketzaldev]

Thanks for the link. I just tried it, and it doesn’t work, unfortunately.

I’ve also read on that subject, saw that IOS has a so called “feature” that allows people to see the :hover on a first tap, and then trigger the click on the second tap. I’ve tried to manually disable every elements that had :hover elements css style on that blog archive.

However, checking at the generated HTML:

Inside .premium-blog-thumb-effect-wrapper, there are two visually stacked divs:
.premium-blog-thumbnail-container
.premium-blog-thumbnail-overlay  <– I think this is the source of the problem

This overlay isn’t manageable from Elementor Interface, and it looks like the designer wanted to separate the picture from the link.

This div (.premium-blog-thumbnail-overlay) also has a CSS rule when checking :

.premium-blog-thumb-effect-wrapper:hover .premium-blog-thumbnail-overlay {
opacity: 1;
}

I think this rule (that I wasn’t able to de-activate) might play with that IOS double tap “feature”

[gturinsky]

Do you have a paid (pro) licence?

this subject is so clearly bound to Apple devices, support should very easily come up with a solution?

[ketzaldev]

Unfortunately not 😉
I am developing myself the website of our small business, and I can’t buy all and every plugins.
Maybe someone or I will find a workaround one day 😉

[Anonymous]

<span style=”color: #000000; font-family: Arial; font-size: 13px; white-space-collapse: preserve;”>Cùng tìm hiểu các thông tin chi tiết về hệ thống cá cược thể thao hàng đầu và link đăng nhập mới nhất đến nhà cái 8XBET, tham gia 8XBET ngay.</span>

 

[Author]

Posts