Essential grid image-based grid - URLs don't work in mobile.. instead same page is refershed

[kirk74]

I have some essential grids that are image-based, and they link to other pages within the site… … I am using absolutely URLs to avoid any issues with relative paths being wrong … What is happening is that while these links DO work fine on desktop and laptop, but mobile phones / iPad they don’t… the link is clickable, but what happens is the current page is refreshed … I have tried on several devices… … and I have cleared browser history and the issue remains.

NOTE that I have also have post-based grids and the links for these work fine on mobile??

This is really urgent, Thanks.

[kirk74]

site login details are posted privately here: https://theme.co/apex/forum/t/urgent-help-required-please/12582

[rad]

HI there,

Thanks for writing in.

I removed this code from your global custom javascript as it triggers js error.

<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
 function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('muteYouTubeVideoPlayer', {
    videoId: 'hPzN1Kgf8R0', // YouTube Video ID
    width: 560,               // Player width (in px)
    height: 316,              // Player height (in px)
    playerVars: {
      autoplay: 1,        // Auto-play the video on load
      controls: 1,        // Show pause/play buttons in player
      showinfo: 0,        // Hide the video title
      modestbranding: 1,  // Hide the Youtube Logo
      loop: 1,            // Run the video in a loop
      fs: 0,              // Hide the full screen button
      cc_load_policy: 0, // Hide closed captions
      iv_load_policy: 3,  // Hide the Video Annotations
      autohide: 0         // Hide video controls when playing
    },
    events: {
      onReady: function(e) {
        e.target.mute();
      }
    }
  });
 }

The grid is properly working, but since it’s on touch (mobiles), the first tap is served as a hover, the second tap will be the click. It has a hover effect, but I’m not sure if this is a setting that can be changed in your setup (can’t reproduce it on my end), would you mind providing the exact grid name? I checked your page and it’s displayed through content_block shortcode and you have a long list of grids.

Thanks!

[kirk74]

Hi again, Thanks for removing that code… I did take this project over form someone else and I didn’t add that code so it does seem that this was redundant code… BUT unfortunately that hasn’t solved the issue … I have checked iPhone and iPad and same issue (and yes I have cleared the browser history)

What is interesting though is that it only seems to be happening on apple mobile devices… so my client and I have the issue on iPad and iPhone… BUT others have checked on android phone and tablet and they DON’T have the issue… so weird… .

Does that shed any light the matter?

So strange and buggy with it being only on Apple devices that it does seem like Essential Grid developers should also look at this… but if I contact them I know I won’t get anywhere quickly but you might…?

Will provide direct links in private message … thx so much for your help.

[kirk74]

Actually just testing this further and you are totally correct it is definitely an issue with the fact that it is trying to do a hover effect, because if I double-click it works fine… and this would make sense that it only happens on apple devices because android devices must be disabling the hover effect by default… so we just have work out how to specifically disable this effect on these grids.

These grids both use the same Grid Skin… BUT there is custom settings on each grid item, so I am not sure where/how the hover effect on Apple devices can be disabled.

Thx.

[ruenel]

Hello There,

We do not have any control over this devices. Perhaps this link might help:

How to remove/ignore :hover css style on touch devices

Thank you for your understanding.

[kirk74]

Sorry I dont want to be demanding but I do need you to help more than this please … please read above… the staff member @Rad asked me which grids are in question because he could clearly see that he needed to help.

YES I understand that you cannot guarantee to be able to help us with third party issues … but in this case, this is not a 3rd party issue… Essential Grid is a key part of what you offer / promote with X… and you bundle it in the package that we buy… if I was to contact Theme Punch about this they would say that I am a customer of yours not theirs so they wouldn’t help they would tell me to go to you.

Further - what I am trying to do is not specialised or custom it is merely a link from a button within a grid to a page… this is basic and essential and needs to work in all mobile devices because you promote X theme as a very mobile-friendly theme…

My gird links work on computer and they work in android … the fact that is NOT working on Apple mobile devices HAS to be a bug between X theme and Essential Grid … therefore you guys please please need to help … Essential Grid and X theme developers should be interested in solving this, as I am sure I am not the only one who will experience this bug … if I was to contact them I wouldn’t be able to get to them quickly, but you are their client, so you COULD get their assistance quickly.

You sent me a generic help link about disabling hover effects … this might work in a general site, but it doesn’t help here as this issue is very specific between Ess grid and X theme.

To help identify the issue … these grids have a hover effect where an alternative image is shown on hover … on Android mobile devices, you DO see this hover image at the first tap, and then the second click takes user to the URL … on Apple devices, we DON’T see that hover effect on the first tap… instead the first tap refreshes the page … SO if a user knew the issue, then they could do a double-tap. and this will correctly take them to the URL… but of course the average user will not know t double-tap…

So this means I simply need to do one of the following:

1 - work out why there is a bug where Apple mobile devices are NOT showing the hover image and fix this so that this hover image IS shown on first tap… then the user will know they need to tap twice.

OR

2 - disable the hover effect on all mobiles so that the first tap will take to the URL.

Thank you for your help.

[nabeel]

Hi again,

Thank you for the detailed write-up. To fix things in mobile devices you can add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.touchevents .esg-fade {
    visibility: visible !important;
    opacity: 1 !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[kirk74]

Thanks for helping … so we are definitely getting closer, because that did do something on Apple devices … but what it did is make them all show the hover state ALL the time … rather than waiting for them to be tapped!!.. can you pls look at it on an iphone or ipad you will see what I mean… they are all set to “find out more” image!

so there must need to be a slight tweak… maybe this is the CSS that is needed, but the way the hover effects has been setup in Esssential Grid needs to do done differently to work with this CSS?

Can you pls look at the Grid settings and advise? (I have been experimenting with changing Show/Hide Hide under Type to display or visibiilty but this doesn’t seem to make a difference either way… .

thx so much…

[kirk74]

I also experimented with putting that CSS into the skin styling itself (via Edit Skin) instead, hoping that this would stop it showing the hiver for ALL and instead show it just for the active item… (this is where the CSS code is now) but unfortunately same effect … the CSS needs t be tweaked somehow to only target the current active item.

[rad]

Hi there,

Your set up is a bit confusing, as you have different skins for each grid items, like bliss active, bliss package and so on. Hence, one grid with multiple skins and you probably assigned them to item’s setting (gear icon). Please edit those skins and change your layer settings and hide them under 767px.

It’s only normal to hide it on smaller devices since they don’t have hover functionality such us in mobile.

Thanks!

[kirk74]

Thanks for reply, yes it is tricky because the rollover image changes the text below the image as well therefore different skin needed for each as it’s not just the “find out more” image that changes…

Thx for your suggestion, I actually didn’t need to do this in the end, as before getting this reply, I solved it by adjusting the URL settings in the skin for each item from URL to Post - even though they do link to URL, using post was what was needed to make the lin work correctly on all devices (actual URL different each time so this is set is the grid itself, but for some reason the skin wanted to be Post not URL).

Hope this helps someone else!

Thx.

[rad]

Ah, thanks for sharing! And glad it’s okay now

[kirk74]

thank YOU! You guys are great

[ruenel]

You are most welcome!