Tuning Interactions to Viewport

Hello all, I’m trying to make a show-hide interaction apply only to smaller screens. My goal is to make only the heading text appear with the body copy hidden on small screens. In this scenario, clicking on the heading text would display the body copy and clicking again hides it. I’ve been able to make the function work on all screens following the video tutorial that demonstrates using a show-hide button (instead of the heading text as in my application). The problem comes when I try limiting the show-hide interactions to smaller screen sizes: deselecting the larger screens for the interaction makes the subject text unavailable in those sizes. It seems I need some other form of conditional control or maybe another approach.

Any thoughts are much appreciated!

Hi, if you can post your project link, we can get a better idea of your design, however, You might try an approach, where you create a copy of the heading area to be used for desktop viewport, and duplicate that for view on mobile. Then, set the mobile version of the heading, to display none when in desktop view, and display visible when in mobile view. Do the same for the desktop view, just make it visible on desktop and hidden on mobile. The real drawback here is then you have multiple content areas to have to manage, but sometimes a simple thing like this will work for your need.

There could also be some javascript/jQuery solution to the matter as well…

There is not yet complex interaction triggers for device specific views, so you need to probably do something like above, but I/We could tell more if we had a link to your project. Cheers!