Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.1 hours
Found email 1
  • Overview
  • Transcript

2.4 Media Queries

Foundation allows you to create responsive emails. This is hugely important, as the latest statistics show us that 54% of all emails are opened on a mobile device. Let’s learn more about media queries and how they help us create responsive emails.

2.4 Media Queries

Foundation allows you to create responsive emails, which is very important because the latest statistics show us that 54% of all emails are now opened on a mobile device. That's huge. So having an email that's optimized for both desktop and mobile is really important. Now, we all know what a media query is, right. It's a CSS module, basically, that allows content to adapt to various conditions like, for example, screen resolution. Well, Foundation for Emails has a single media query. And it looks something like this, or like this if you're using the Sass version. The difference is the Sass version allows you to control that maximum screen width. Now, this media query should house all of the mobile styles. So all of the changes that take place when we go to a mobile screen should be placed right here. For example, changing the text alignment from left on large screens to center on mobile. As I was saying, the breakpoint is fixed in the CSS version of the framework. Of course, we can change its value, but it comes by default with a fixed value. The Sass version, on the other hand, has somewhat of a more dynamic value because it uses some variables to create that value. Now, if we take a look in our SRC folder, assets, settings.acss, and we're gonna scroll down, we're gonna find global breakpoint. And this is comprised of the global width, which is defined up here, plus the global gutter which is also defined up here. So we end up with 596 pixels. Of course, we can change these values to whatever we want, and the global breakpoint will adapt accordingly. And this is actually recommended. If you're using the Sass version, it's recommended that you keep this value instead of a fixed one because it gives you more flexibility down the road. All right, I just gave you this quick explanation on how media queries work in here because I wanted you to understand how Foundation is making these emails responsive. Now, let's have a look at some of the components that you can use to build your emails. And that's coming up in the next lesson.

Back to the top