• Learn
    • About Foundation
    • Tutorials
    • Classes
    • Case Studies
    • Brands
  • Develop
    • Frameworks
    • Foundation for Sites
    • Foundation for Email
    • Foundation for Apps
    • Develop
    • HTML Templates
    • Resources
    • Building Blocks
    • Yeti Launch
    • Contribute
  • Upload
  • Support
    • Support Channels
    • Premium Support
    • Foundation Forum
    • FAQs
  • Docs
    • Sites Docs
    • Apps Docs
    • Email Docs
  • Getting Started
  • Foundation
  • Dot
  • ZURB
  • Com
  • Slash
  • Sites
  • ZURB Foundation
  • Learn
    • About Foundation
    • Tutorials
    • Classes
    • Case Studies
    • Brands
  • Develop
    • Frameworks
    • Foundation for Sites
    • Foundation for Email
    • Foundation for Apps
    • Develop
    • HTML Templates
    • Resources
    • Building Blocks
    • Yeti Launch
    • Contribute
  • Upload
  • Support
    • Support Channels
    • Premium Support
    • Foundation Forum
    • FAQs
  • Docs
    • Sites Docs
    • Apps Docs
    • Email Docs
  • Getting Started
Foundation

Visibility Classes

Visibility classes let you show or hide elements based on screen size or device orientation. You can also use visibility classes to control which elements users see depending on their browsing environment.

Visibility classes use !important to ensure they aren't overriden by more specific selectors. This is the only component in the framework that uses !important.

There are no classes to detect touchscreen devices, as both desktop and mobile browsers inconsistently report touch support. Learn more here: You Can't Detect a Touchscreen

Show by Screen Size

In this example, we use the .show visibility classes to show certain strings of text based on the device on which users view a page. If their browser meets the class's conditions, the element will be shown. If not, it will be hidden.

<p>You are on a small screen or larger.</p>
<p class="show-for-medium">You are on a medium screen or larger.</p>
<p class="show-for-large">You are on a large screen or larger.</p>

You are on a small screen or larger.

You are on a medium screen or larger.

You are on a large screen or larger.

These classes automatically hide the element on screen sizes below what's specified in the class. So .show-for-medium will hide the element on small, and show it on medium and larger.

A separate set of classes allow you to show content only on a certain screen size. Just add -only to the end of the class.

Don't see any text below the code sample? You must be on an extra large screen.

<p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>

You are definitely on a small screen.

You are definitely on a medium screen.

You are definitely on a large screen.


Hide by Screen Size

This example shows the opposite: It uses the .hide visibility classes to state which elements should disappear based on the device's screen size.

There's no .hide-for-small class, because that would just permanently hide the element. For that, you can use the plain old .hide class instead.

<p class="hide-for-medium">You are <em>not</em> on a medium screen or larger.</p>
<p class="hide-for-large">You are <em>not</em> on a large screen or larger.</p>

You are not on a medium screen or larger.

You are not on a large screen or larger.

If you're reading this, you're on a large screen, and can't see either of the above examples.

Like with .show, these classes also have -only versions.

<p class="hide-for-small-only">You are <em>definitely not</em> on a small screen.</p>
<p class="hide-for-medium-only">You are <em>definitely not</em> on a medium screen.</p>
<p class="hide-for-large-only">You are <em>definitely not</em> on a large screen.</p>

You are definitely not on a small screen.

You are definitely not on a medium screen.

You are definitely not on a large screen.

Generic Hide Classes

And if you really just need something hidden no matter what, there are classes for that as well. The .hide and .invisible classes respectively set display: none and visibility: hidden on an element. Note that both of these classes hide content from screen readers.

<p class="hide">Can't touch this.</p>
<p class="invisible">Can sort of touch this.</p>

Orientation Detection

This straightforward example shows how two strings of text determine whether or not an element is visible in different orientations. This will change on mobile devices when you rotate the device. On desktop, the orientation is almost always reported as landscape.

<p class="show-for-landscape">You are in landscape orientation.</p>
<p class="show-for-portrait">You are in portrait orientation.</p>

You are in landscape orientation.

You are in portrait orientation.


Accessibility

Adding display: none to an element will prevent screen readers from reading it. However, there are techniques to hide content while still making it readable by screen readers.

Show for Screen Readers Only

To visually hide content, while still allowing assistive technology to read it, add the class show-for-sr.

<p class="show-for-sr">This text can only be read by a screen reader.</p>
<p>There's a line of text above this one, you just can't see it.</p>

This text can only be read by a screen reader.

There's a line of text above this one, you just can't see it.

Hide for Screen Readers Only

To hide text from assistive technology, while still keeping it visible, add the attribute aria-hidden="true". This doesn't affect how the element looks, but screen readers will skip over it.

It's usually not a good idea to hide content from screen readers. aria-hidden is best used to mask purely visual elements of a page.

<p aria-hidden="true">This text can be seen, but won't be read by a screen reader.</p>

This text can be seen, but won't be read by a screen reader.

Creating Skip Links

If your site has a lot of navigation, a screen reader will have to read through the entire navigation to get to your site's content. To remedy this, you can add a skip link at the very top of your page, which will send the user farther down the page, past the navigation when clicked on.

Use the class .show-on-focus to hide an element, except when it has focus. Adding tabindex="0" to the target element makes if focusable.

<p><a class="show-on-focus" href="#mainContent">Skip to Content</a></p>

<header id="header" role="banner">
</header>

<main id="mainContent" role="main" tabindex="0">
</main>

Skip to Content


Sass Reference

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

show-for

@include show-for($size);

Hide an element by default, only displaying it above a certain screen size.

ParameterTypeDefault ValueDescription
$size Keyword None

Breakpoint to use. Must be a breakpoint defined in $breakpoints.


show-for-only

@include show-for-only($size);

Hide an element by default, only displaying it within a certain breakpoint.

ParameterTypeDefault ValueDescription
$size Keyword None

Breakpoint to use. Must be a breakpoint defined in $breakpoints.


hide-for

@include hide-for($size);

Show an element by default, and hide it above a certain screen size.

ParameterTypeDefault ValueDescription
$size Keyword None

Breakpoint to use. Must be a breakpoint defined in $breakpoints.


hide-for-only

@include hide-for-only($size);

Show an element by default, and hide it above a certain screen size.

ParameterTypeDefault ValueDescription
$size Keyword None

Breakpoint to use. Must be a breakpoint defined in $breakpoints.

  • Visibility Classes

  • Edit this Page
  • Report a Bug
  • Get Help
  • Join Slack Channel

    (Changelog)

  • Getting Started
  • Installation
  • Starter Projects
  • Compatibility
  • Accessibility
  • Kitchen Sink
  • Setup
  • Global Styles
  • Right-to-Left Support
  • Flexbox
  • Sass
  • JavaScript
  • JavaScript Utilities
  • Media Queries
  • General
  • Grid
  • Flex Grid
  • Forms
  • Visibility Classes
  • Float Classes
  • Typography
  • Base Styles
  • Helper Classes
  • Controls
  • Button
  • Button Group
  • Close Button
  • Slider JS
  • Switch
  • Navigation
  • Overview
  • Menu
  • Dropdown Menu JS
  • Drilldown Menu JS
  • Accordion Menu JS
  • Top Bar
  • Responsive Navigation
  • Magellan JS
  • Pagination
  • Breadcrumbs
  • Containers
  • Accordion JS
  • Callout
  • Dropdown JS
  • Media Object
  • Off-canvas JS
  • Reveal JS Modal
  • Table
  • Tabs JS
  • Media
  • Badge
  • Flex Video
  • Label
  • Orbit JS Carousel
  • Progress Bar
  • Thumbnail
  • Tooltip JS
  • Plugins
  • Abide Form Validation
  • Equalizer Column Alignment
  • Interchange Responsive Content
  • Toggler CSS Helper
  • Sticky Header/Sidebar
  • Sass
  • Functions
  • Mixins
  • Libraries
  • Motion UI
  • Panini
  • Style Sherpa
  • Older Versions
  • Foundation 5
  • Foundation 4
  • Foundation 3
  • Foundation 2
ZURB STUDIOS

Let's build something amazing.

Work with our scrappy design team to bring your concepts to life. We’ll equip you with our battle-tested Progressive Design process and the tools to get your product or website off the ground and in front of your users.

Show Me How →
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »

Foundation for Sites

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.

Want more?

  • Foundation for Apps
  • Ink Responsive Emails
  • Notable Design Apps
  • Training
  • Design Resources

Talk to us

Tweet us at
@ZURBfoundation

Business Support

Or check our support page

Stay Updated

Keep up with the latest on Foundation. Find us on Github.

Stay Connected
Studios Helping more than 200 startups succeed since 1998.
Foundation The most advanced front-end framework in the world.
Notable Design Apps Prototype, iterate and collect feedback on your products.
University Ideas, thoughts and design resources shared with you.
  • About
  • Blog
  • News & Events
  • Contact
  • Sitemap

© 1998‐2015 ZURB, Inc. All rights reserved.