Visibility

Show or hide elements responsively

Stacks Image 1798

Visibility stack

Visibility is a simple, but powerful stack. It allows you to show, or hide, just about any page element at each of the three breakpoints, allowing you to customize your visitor’s experience based off of the device they’re viewing your site with, or their browser’s width.
This can be handy when you have specific content to serve up only to your mobile visitors for instance, or extended content you want to offer your desktop visitors, but don’t want to bother your mobile users with. Our Visibility tutorial video shows how it works and how to make use of its simple settings.

Tutorial

Samples

Stacks Image 2360

Desktop

This content is hidden at the iPad and iPhone breakpoints, but is visible at the breakpoint for the Desktop. If you shrink your browser window down, when you get to the iPad breakpoint this content will disappear. But don’t fret, we’ve got some other content hidden here that will come to light at the iPad break point for you!
Stacks Image 2410

iPad

This content is hidden at the Desktop and iPhone breakpoints, but is visible at the breakpoint for the iPad. If you continue to shrink your browser window down, when you get to the iPhone breakpoint this content will disappear and you’ll get a look at what we have in store for you on the iPhone. Oh, what could it be?
Stacks Image 2460

iPhone

This content is hidden at the Desktop and iPad breakpoints, but is visible at the breakpoint for the iPhone. If you continue scale your browser back up you can have a look at the iPad and Desktop content again. Feel free to check it out on your mobile devices as well.

It just works

There’s no need to do much more than toggle a few settings on, or off to get the Visibility stack up and running. You can have page elements display at one, or more different breakpoints, in whatever combinations you’d like. Below we’ve mixed the Visibility stack with our Columns stack to have some of the images change based upon the device or browser width:
Stacks Image 2497
Stacks Image 2507
An Important Headline
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Stacks Image 2517
Stacks Image 2532
Stacks Image 2542
An Important Headline
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Stacks Image 2717
Stacks Image 2721
An Important Headline
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Stacks Image 2730
Stacks Image 2734
An Important Headline
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.