Media Queries

Media Queries and Visibility Settings

Check the table below for common Scss Variables set in _settings.scss which should be stored in your project's 'sass' directory. See documentation for Responsive Templates and CSS for details of how to work with media queries. With any change to the variables you will need to recompile the CSS.

Size of Screen Scss Variable Width Setting Foundation/Venda
Small $small-screen 768px Foundation
Desktop $desktop-screen 998px Venda
Medium $medium-screen 1260px Foundation
Large $large-screen 1440px Foundation

Foundation Classes

Foundation has a break point which separates small screens from large screens. In conjunction, it works with a series of classes that can show and hide content according to the screen width or device.

The table below shows how the variables above are used to set Foundation's media queries and visibility classes.

Size of Screen Width Range
Small < 768
Medium 768 - 1259
Large 1260 - 1440
X Large > 1440

The following text should describe the device you are using: You are on a very large screen. You are on a large screen. You are on a large or very large screen. You are on a medium screen. You are on a medium or small screen. You are on a small screen, like a smartphone.

Using the opposite rules, the following text should inversely describe the device you are using: You are not on a very large screen. You are not on a large screen. You are not on a large or very large screen. You are not on a medium screen. You are not on a medium or small screen. You are not on a small screen.

The following text should describe the device you are using: You are in landscape orientation. You are in portrait orientation.

The following text should describe the device you are using: You are on a touch-enabled device. You are not on a touch-enabled device.


Extra Venda Classes

Venda required a further breakpoint within the 'Medium' range to show separate content for a portrait tablet, so an additional media query is available and extra show/hide classes. You can use these if Foundation's 'Medium' spec does not help achieve your responsive specifications.

The table below shows how the variables above are used to set Venda's extra media query and visibility classes.

Size of Screen Width Range
Tablet Portrait 768 - 997
Desktop 998 - 1259

The following text should describe the device you are using: You are on a portrait tablet device. You are on a portrait tablet device or larger screen. You are on a desktop. You are on a desktop or larger screen.

Using the opposite rules, the following text should inversely describe the device you are using: You are not on a portrait tablet device. You are not on a portrait tablet device or larger screen. You are not on a desktop. You are not on a desktop or larger screen.