With responsive visibility, you can easily show or hide various pieces of information with different groups of visitors viewing your site on a wide array of devices. While this isn’t something that you’ll use for everything, there are certain times where you might want to share a specific message just to your visitors on mobile devices, tablets, desktops, or any combination of those three. To do so, simply wrap the content you want to display (or hide) for different groups in the [visibility] shortcode. Next, simply add in which groups the content should be shown or hidden from, and voilà! Go ahead and resize your browser window to see how different messages are displayed below for different screen sizes.
Desktop Message
I’m only for the larger screens. Since there’s more room, I can take a little more space up to explain what I’m trying to say if I need to. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.Tablet Message
I’m only for the medium sized screens. There a little less room here, so try and shorten things up a bit, but don’t worry, you don’t have to fret too much over the length of your message just yet.Phone Message
I’m only for the smallest screens. Try and keep things short and sweet here.Additionally, if you need to, you can use the [visibility] shortcode inline with your content (i.e. inside a paragraph for instance) if you need to cut something down or add something for a particular size. See the example below and how the heading gets getting shorter as the screen is sized down.
Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Code
[visibility] Place your content here. [/visibility]