Navigation

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-range 0 - 767px Foundation
Medium $medium-range 768px - 997px Foundation
Large $large-range 998px - 1259px Foundation
X Large $xlarge-range 1260px - 1439px 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 - 997
Large 998 - 1259
X Large > 1439

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.

Minimum length is
Maximum length is
Please enter a value in both fields
Please enter your name
Please enter a message
Please enter the name of the recipient
Please enter a valid quantity
Please enter a phone number
Please enter a valid phone number
Please enter an email address
Please enter a valid email address
weleda
restofworld
en
GBP
http://www.weleda.co.uk
http://www.weleda.co.uk/bin/venda