Skip Navigation

[Resolved] Showing icons with links in place of text for mobile devices.

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.
This support ticket is created 6 years ago. There's a good chance that you are reading advice that it now obsolete.
This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 1 reply, has 2 voices.

Last updated by Christian Cox 6 years ago.

Assisted by: Christian Cox.

Screen Shot 2018-04-19 at 10.13.46 AM.png

I've attached the image of what I am trying to do. The problem with the views is that when in mobile mode, the phone number, address, and name are too much info and are not legible and make it more difficult to see directory. The attached shows 3 icons to use in place of these items. In fact each of these have links so when touched on mobile device open phone, email, and maps app.

How can I achieve this? I'd like to show a directory image and phone, address, and email just as this shows.

My biggest problem is not knowing how to show this data as text on desktops and tablets, and then having it change to icons on mobile devices.

My thought was to create 2 views, one for desktop and tablet, then switch off that view in Elementor and activate the second view for mobile. However, I still run into the problem of how to substitute an icon using the directories info and using it as a hyperlink for mobile touch. In other words, how do you take the directory info and then make it the hyperlink info for a mobile icon. (I assume this is what needs to take place.) Also, if there is no email or phone, etc. the icon doesnt show. As seen in attachment for Allen on email.

Hopefully this makes sense.

Thank you in advance.

** I'm using new beta versions with relationship features, etc....**


The approach I recommend is to include both the icons and the full text in the same View, and use CSS media queries to show or hide them at different screen resolutions. Here's an article on CSS Tricks about using media queries:

The forum ‘Types Community Support’ is closed to new topics and replies.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.