I’m adding an interactive map w=that brings customers to collection pages. The size works on desktop but I need it to also look good on mobile, I’m using the sense theme. My solution would seem to be making the same map that is smaller for mobile and hiding the desktop version for mobile users, and vise versa. thanks for the help!
Topic summary
A user needed to display an interactive map at different sizes for desktop and mobile viewers in the Sense theme. The solution involved creating two separate versions of the map—one optimized for desktop and another smaller version for mobile—then using CSS to hide/show the appropriate version based on device type.
Key Points:
- Original poster resolved their issue but didn’t share the specific solution
- Another user asked how to apply the same hide/show technique to text elements (not maps)
- Recommended approach: Add separate CSS classes to elements, then write CSS rules to show/hide content based on device view
Status: The original map issue was resolved. Discussion shifted to helping another user implement similar desktop/mobile visibility controls for text content using CSS classes.
@JonnyBrower - can you please share this page link?
Hi,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.
I got this solved already thanks!
@JonnyBrower How did you solve this, looking for the same thing.
@JacobRoberts - create second smaller map for mobile, and hide desktop one of mobile, just as mentioned by @JonnyBrower
Sorry, Its not a map. I am trying to hide some text on Mobile and vice
versa. How do I go about this?
@JacobRoberts - have you added separate classes for this texts? using those class names you can write css which will hide/show content on device view you want