Hello,
I'm trying to create an extra space row in an email that needs to be different for desktop and mobile. I thought I'd create two rows and hide one for desktop/mobile but I've run into an issue where I can't get the variable in the <head> to work. It just uses the default instead of the value I insert when building the email.
<head>
<!-- Marketo Variables -->
<meta mktomodulescope="true" class="mktoNumber" id="bnr-top-space" mktoname="Top Space" default="25" min="0" max="800" step="1" />
<meta mktomodulescope="true" class="mktoNumber" id="bnr-top-space-mobile" mktoname="Top Space Mobile" default="25" min="0" max="800" step="1" />
<style type="text/css">
@media only screen and (max-width: 660px) {
.show-xs {
display: block !important;
mso-hide: none !important;
overflow: visible !important;
max-height: none !important;
width: 100% !important;
height: ${bnr-top-space-mobile}px !important;
}
.hidden-xs {
display: none !important;
visibility: hidden !important;
width: 0 !important;
mso-hide: all !important;
overflow: hidden !important;
}
}
</head>
<body>
<table width="560" cellpadding="0" cellspacing="0" style="border-spacing: 0; margin:0 auto;width:560px;" border="0" align="center" class="deviceWidth1">
<tbody>
<tr>
<td class="extra-space-nochange hidden-xs" style="font-size: 1px;line-height: 1px; display:block; width: 100%;" height="${bnr-top-space}"> </td>
</tr>
<tr>
<td class="extra-space-nochange show-xs" style="font-size: 1px;line-height: 1px; display: none; mso-hide: all; overflow: hidden; max-height: 0; width: 0; height: 0;" height="${bnr-top-space-mobile}"> </td>
</tr>
</tbody>
</table>
</body>
The ${bnr-top-space-mobile} works in the <body> but the one in the <head> won't change from the default value. Am I missing something? Does mkto syntax not work in the <head>? Any suggestions on how I can fix this?
Thank you!
.png)