Hi Josue,

Please check again in PVT

Thank you Andy, Ismail and Yigit for your help. Overall it is a great solution in my opinion and it proves that mobiles (at least Safari on iOS) can process the hover effect perfectly fine on the image hotspots at least by tapping instead of hovering obviously.

The issue with the popup positioning could probably be fixed by adapting the code a bit but it is possible to manually adjust them. I did it successfully in my testing environment. Where can I suggest this to be part of Enfold in the future?

Many thanks.

Hi Ismael,

Thank you for reviving this post with a new attempt, however, the CSS code provided did not produce any effect or change on the image hotspots area.

Regarding the explanations:
“1.) Mobile devices don’t support hover state so it’s not going to work as it should.”
I tried this on iPad which uses the same technology as iPhone for example and hover state works fine there!

2.) There is not enough space to accommodate the tool tip especially when you use long text.
We have little text and hope the tool tip does note cover the whole screen… hopefully will not…

If there is a way to override the mobile version on mobile at all costs for the image hotspot?

Many thanks

Hi Andy,

I am sure Kriesi has valid reasons to show hotspots on mobile and the alternative way to show it is ok for most users but useless for this specific website.

I tested this on iPad (same touchscreen idea) and it worked perfectly so, all I am asking is the CSS code that changes the hotspots model on smaller screens (i.e. mobile devices). If there is a better way to set a specific resolution to show the mobile version to “trick” the hotspots module I am fine with that! Some sort of condition such as “show hotspots mobile version if width <= 100 pixels”. This way the mobile would display it as the desktop version.

Is there anyone else from your team (a colleague or even Kriesi) that can step in to make this happen?

Many thanks.

• This reply was modified 9 years ago by sitesme.

Hi Andy,

I just posted twice as it is unusual to wait more than 48h for a reply. I’ll take that in consideration for the future.

As for the link provided I believe this is not exactly what I need. I was asking to “disable” the mobile version of the image hotspots altogether and display it as it shows on desktop screens. Is this possible?

Thank you

Hi Andy,

Thank you for your help.

The code provided hid the text on mobile. The text should not be hidden.

Two possible scenarios if you can help us, for the mobile version of the image hotspot:
1) Disable the “mobile version” for the image hotspot module and display it in the exact same way as the desktop. This means that instead of showing 8 hotspots in the image and 8 text boxes below the image, it would work in the same way as the desktop does: hover the hotspot and a popup displays the text

OR, if the above is not possible:

2) We have the following text next to the image: “Please rollover a city for more details”. Is it possible to replace this text on mobiles only to “refer to key for more information”?

One or the other would work really.

Many thanks for your help.

Thank you Yigit,

I quite prefer the solution you gave me and remove the date and time from the sidebar. It is ok as far as the date is displayed on the article itself. Thank you very much for this.

PS – Pls check my private content below as well.

I understand.

Thank you Rikard for the clarification.

Hi Basilis,

Unfortunately the code didn’t work. I still see the date on the side widget of my blog posts.

Spot on Andy! :)

Thanks again for your great help and patience on this one…

Hi Andy,

Unfortunately that is what we already have at the moment “Open a preview of the entry (known as AJAX Portfolio)” – we need to REMOVE the Preview / ajax / lightbox altogether and when someone clicks on the picture nothing should happen, the picture should NOT enlarge.

Basically… the portfolio item should NOT open in a new page or should NOT open in a lightbox. It is enough to open like this only: http://dns.d.pr/1bvjW/4YYLrrvl

Any quick CSS to remove the preview of the entry on portfolio items?

Thank you

Hi Andy,

All my initial questions have been fixed now with the following codes, however, the lightbox removal is not right.

Using Enfold’s demo example: http://kriesi.at/themes/enfold/portfolio/portfolio-ajax/
I still want to open the image exactly like this: http://dns.d.pr/1bvjW/4YYLrrvl – but the lightbox (http://dns.d.pr/me4x/2dVzhXWU) should not open, ever. We have removed the “zoom into lightbox” icon from the images successfully, now it is just to remove the link from the image itself.

Hope I was clear enough, please let me know.

Thank you

Dear Andy,

#1 code worked perfectly fine but I realised that there is also the “enlarge icon” when image expands. Sshot: http://dns.d.pr/1fKAE/4w8SY79f taken from this page: http://kriesi.at/themes/enfold/portfolio/portfolio-2-column/

In addition to the icon removal, how can we disable the image enlargement? From this page: http://kriesi.at/themes/enfold/portfolio/portfolio-ajax/
We want to display the image like this: http://dns.d.pr/1iDX4/43JDlRPz and we want to deactivate the lightbox link that will show the image like this: http://dns.d.pr/14d5E/14IlweJp

As for code #2, it didn’t work. From the same demo page from Enfold, this is the area we would like to change the color (mentioned in red): http://dns.d.pr/1c6xk/5Y7h6MKh

Thank you a lot for all help provided so far.

Hi Basilis,

I am using the regular postname permalink method.

Thank you

Hi Andy,

Thank you for your help.

The 1st code is great but it still shows the circle where the arrow was. I assumed the arrow / circle was a single item but I was wrong.
So, how can I hide the circle and the arrow when mouse is over the image? The “image fade” effect shall remain as it is.

As for code #2, the font color is changed but I would like to change the background only. Basically, the area mentioned here in the red box: http://dns.d.pr/1hzWq/31UcIDcQ

Many thanks.