Changing padding on Mobile

If you need to control the mobile padding in your Email Design System, there are a couple of options to achieve this in Taxi.

Option 1

The first can be used if you want a document level field to control mobile padding across multiple modules. In other words, it would be the same across all modules.

In your media query you can include a class, such as: mobile_padding, with a certain value as the default, for example 10px.

<style type="text/css">
@media screen and (max-width: 640px) {
.mobile_padding {
 padding-top: 10px!important;
}
}
</style>

You can then have a field in document settings, or create a separate formatting module with a field, that will be used to control mobile padding.

<field type="number" name="mob_padding" label="Mobile padding"></field>

Then, you would use a replace attribute in the style tag above in order to reference this field in the media query.

<style type="text/css" replace="@media screen and (max-width: 640px) { 
.mobile_padding { padding-top: {{document.mob_padding}}px!important; }">

And then throughout the HTML you can use this class in the relevant places.

<td class="mobile_padding">

So, whatever number is used in the number field mentioned above, will get used in the style tag/media query. And this will control any HTML that is using that class name.

Option 2

This second option would be used when you want to control the mobile padding separately in different modules.

Instead of having one class and a field to control the value of it, you will need a class for each of the different padding options you want.

<style type="text/css">
@media screen and (max-width: 640px) {
.mobile_padding10 {
 padding-top: 10px!important;
}
.mobile_padding20 {
 padding-top: 20px!important;
}
 .mobile_padding30 {
 padding-top: 30px!important;
}
}
</style>

And then in the module where this is used, you can have a dropdown field with the values matching the values in the media query.

<field type="dropdown" name="mob_padding">
 <choice value="10"></choice>
 <choice value="20"></choice>
 <choice value="30"></choice>
</field>

And when you reference this field you need to do so in a replace-class attribute.

<td replace-class="mobile_padding{{mob_padding}}">

Whatever option you select in the dropdown will get used in the replace-class attribute above. For example, if you select 10 from the dropdown the class would become mobile_padding10 and the CSS from this class would get used.

This approach would allow you to have the padding field in the module where you'd like to change the padding.

Next: Separate Mobile Images

Back to Coding for Mobile