Foundation

Mobile Visibility

Foundation is designed to quickly prototype, and one thing we've found very helpful is a series of visibility classes that can be applied to turn things on and off for different device characteristics. On this page, you'll see different elements on different screen sizes or orientations.

Mobile Visibility

Foundation is designed to quickly prototype, and one thing we've found very helpful is a series of visibility classes that can be applied to turn things on and off for different device characteristics. On this page, you'll see different elements on different screen sizes or orientations.

← Back to Mobility

As an example, you'll only see this interface if you're on a desktop machine (something with a resolution higher than 768px wide, and not matching specific tablet resolutions). On a desktop we might make more use of columns for layout, as well as show more information for content.

Example Download (Not Real)

Since downloads only work on desktops (well, or with Dropbox on mobile devices) we only show this for desktops.

Placeholder Download

Longer Portrait Page

This section only shows on a portrait orientation of a device with a larger screen than, say, a phone.

Small Interface


As an example, you'll only see this interface if you're on a phone (something with a resolution lower than desktops or tablets). On a phone our columns will all stack, and we would place navigation at the bottom of the page.

Stay on top of what's happening in responsive design with Responsive from ZURB.

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