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:
https://css-tricks.com/css-media-queries/