Marketo Templates Spacing messing up on different devices

[Julie_Trow]

I am using the pre-built marketo Mission Control template. I set the spacing between the headline and body copy of each module to 5px but it looks different on all the different devices I tested it on. See attached. Outlook spacing is huge on a Mac but disappears on my PC outlook 10. Which size is it reading? I only set the pixel size using the right hand module options. How do I fix this? These pre-made templates shouldn't be broken before I even use them!

[Frank_Breen2]

Welcome to the world email developing for different clients, MS Outlook for Mac and MS Outlook for PC are developed by different Microsoft teams and each render emails very differently, I find MS Outlook for Mac is very generous with spacing, others are very tight, I think it goes back to the days when blank <td tags where 15px - 20px high when empty, try the fix described here: How does Outlook handle height in empty table cells | Campaign Monitor. You may want to set the px values to the same as the variable if you're using one.

Marketo did very little testing before launching the starter templates and they have loads of gaps, I personally would write my own or use a MailChimp boilerplate, many other boilerplates are out there too. It's not impossible to fix the starter template though, you should be able to do it in around 20-30 hours. I would analyze how many opens you get on certain devices then develop with that in mind.

[Frank_Breen2]

I just looked at your code, can you try the following:

Change

<meta class="mktoNumber" id="freeTextSpacer" mktoname="Top Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />

to

<meta class="mktoNumber" id="freeTextSpacer" mktoname="Top Spacer" default="15" min="1" max="300" step="1" mktomodulescope="true" />

basically removing units="px"

then change

<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer};font-size:${freeTextSpacer};" height="${freeTextSpacer}">

to

<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer}px;font-size:${freeTextSpacer}px;" height="${freeTextSpacer}">

I added px after line-height and font-size. How Marketo have setup the template, when you set the variable of freeTextSpacer height would look like this:

height="40px" but the actual valid code should be height="40".

See if that will fix the issue, this is what I've done for my templates.