You might try adding the "CTA Align" variable ${CTA-align} on the actual <td> for your button. It looks like you've got it on the parent <table> and the parent <td> to that table, but maybe putting it on the <td> as well would help align that <td> inside the <table>? It's been a while, but I think I remember some versions of Outlook "preferring" the inline attribute align="center" over something like style="text-align:center".   I can't tell without running some tests, but you might also want to check and make sure that table is showing up at 100% width so that there's room for the button to get pushed to the right. If it weren't reading the full width of the table, it might actually be right-aligned but in a short row so it looks left or center. An easy way to do this would be to change the bg-color of the parent elements (table and td) to something loud like bright-green and then send a test to make sure the colored boxes span the width of your email body. ... View more

Hey Jo, It looks like there's a mixed bag of support for media queries on Desktop Outlook apps. These links are to an article from last year (so there might be more current info) but it looks like everything except Outlook 2007-16 will read the media queries on desktop. https://blog.campaignmaster.co.uk/2019/02/05/outlook-com-to-support-media-queries-enhanced-accessibility/ https://campaignmaster.co.uk/resources/css-support-on-email-clients/   You might think about using a mobile-first approach for the media query stuff b/c desktop is inherently more capable than mobile of rendering more complex stuff. Rather than writing the media query to a "max-width" (so basically it contains your "mobile" set of styles) you might think about using a "min-width" (so it contains your "desktop" set of styles) and instead putting the code for desktop inside a media query. I've run into a ton of headaches in the past trying to work around a desktop-first approach b/c it gets really tangled down the line b/c you're trying to do more (use a media query) with less (email on mobile is less capable).      ... View more

Hey Zack,   Would you be willing to post a link to the non-responsive page you've got setup on the Marketo template and let me know which template you're using from the library. I've had half-a-mind to rework some of these templates in the past b/c well.... they need it. If you'd be able to share what you've already got setup, I'd be willing to work to rebuild something to share with the community here that was as close as we can get it to your requirements. Let me know if that's something you'd be interested in and I'd be happy to help out for the greater good if I can.   Thanks, Dave ... View more

Are there other images on the email that ARE showing up in the client's inbox? Maybe they've got images turned off by default or something other like that? I've heard about issues (specifically w/ Outlook) with the end-user setup, there's a bunch of different config options and sometimes it's a user's settings or a company-wide setting that's running interference.    I can't think of a scenario to explain why you'd get something in your Outlook that was showing the image but it "didn't work" in Outlook, it's usually a case of an issue on the client-side with some settings. You might ask them to use a different account or find someone who also uses Outlook to test this -- most times it's an organization-wide issue with Outlook so asking your cube-mate might not be any different than checking it yourself.    It's been a while since I built/tested email stuff but I'd always rely on Litmus (or nowadays we use Email on Acid) as a source of truth for this kind of stuff and show it working in that context.    ... View more

I've seen hairlines of color before in a module and it's usually got something to do with the HTML structure of the email or where the colors are placed in the HTML. In my experience it's when the red color is set as the background and you've got other colors overlapping it but it still shows thru at the top/bottom on some displays for some reason. Maybe try playing with which element (tables or td) you've got your colors placed into and try removing a little bit at a time to see if anything will resolve the color issue.   If you're able to share the html for that specific module/section we might be able to find some clues in the HTML structure, but it might also be something in the <style> in the <head>.  ... View more

If there's a toggle to hide the button, you might also want to try and clear the editable element for the button if that's possible (to get rid of the html). Simply hiding it with CSS isn't enough to actually eliminate it in situations like this, the code itself needs to be cleared (right-click on the editable area and choose "Clear Content"). When you receive an email, there's usually a bunch of styles that get dropped from the email based on which inbox service you use. Most (good) templates are coded with some different layers of code that work for Gmail, Outlook and the rest a little differently. Once you send the email and it ends up in a Gmail inbox, for example, it'll lose all of the code that was written for Outlook (b/c gMail doesn't recognize it as valid code) and some of the code will get interpreted to gel with gMail so it's not the same code getting forwarded as what came to the inbox originally.   ... View more

and P.S. - the "bulletproof" buttons and background stuff that's out there on the internet isn't what it used to be. A lot has changed in the last few years and I don't think these tools have been kept up to accommodate newer applications and code changes (like gMail) -- buyer beware! ... View more

Hey Jo,   Try using this code for the top bit of the Outlook code: <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:300px;"> <v:fill type="frame" src="https://dummyimage.com/600x300/AA4242/ffffff&text=Background+Image+600px+wide" color="#7bceeb" /> <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">   It looks like the big difference here is the "type" attribute on the v:fill -- you could try using the "frame" property instead of the "tile".  Here's a link to the Microsoft docs on the fill attribute: https://docs.microsoft.com/en-us/windows/win32/vml/type-attribute--fill--vml ... View more

The preview in Marketo isn't really reliable as a "source of truth" b/c it's actually more capable than most inboxes of figuring out little errors or conflicts in the code and correcting them whereas some inboxes are much more literal and less friendly when rendering code.   One of the major differences I've noticed is that you'll get the styles in the <head> in the Marketo preview but in some inboxes those styles aren't read at all and in others it's a mixed bag.    Without seeing the code, I'd guess there's a <style> in the <head> that's doing something to change the layout orientation (from horizontal to vertical). To me, that sounds like it could be a "display:block" rule or something that modifies what Im assuming is a table with a few <td> around the blue and gray boxes. Maybe you could try removing bits of the CSS from the <head> and see if you can get the preview in Marketo to match what you see in your inbox to kinda zero-in on the suspect? ... View more

Hey Katie, do you want the logos to always stack one atop the other -- or -- are they supposed to be next to eachother on desktop or something like that?   If you're looking to get them to always stack, you might want to add a table in place of the 2 <div>s you've got setup now and then inside that table, use 2 <tr> (rows) and stack your content that way. As a quick example to illustrate the idea here, I've wrapped some tags around what you've already got. The new code is commented out so it's a little easier to read, and you'd of course want to add all the parameters for the new elements similar to the tables above it around the social icon section.   <td align="right " width="123 " style="float: right;"> <!-- <table> <tr> <td> --> <div class="mktoImg" id="footerLogo" mktoName="Footer Logo" mktoImgsrc="http://go.mysticlake.com/rs/485-SMD-064/images/logo_ML_purple.png" alt="Mystic Lake" mktoImgLink="http://www.mysticlake.com/" mktoLockImgStyle="true"> <a> <img width="123" align="right" style="display:block;border-width:0;width:100%;max-width:123px;height:auto;padding-bottom:5px;"/> </a> </div> <!-- </td> </tr> <tr> <td> --> <div class="mktoImg" id="footerLogoTwo" mktoName="Footer Logo" mktoImgsrc="http://go.mysticlake.com/rs/485-SMD-064/images/LSC Logo_aug18.png" alt="Little Six" mktoImgLink="http://www.littlesixcasino.com/" mktoLockImgStyle="true"> <a> <img width="123" align="right" style="display:block;border-width:0;width:100%;max-width:123px;height:auto;padding-top: 5px;"/> </a> </div> <!-- </td> </tr> </table> --> </td>  If you were to go this route, you might also want to change the alignment of your images from right to center. ... View more

It sounds like you're already on the right track with using something that's responsive and validated in Litmus.    While it is possible to use breakpoints in Email code, you'll not get the same range of support you would from browsers so it's not a "sure fire" solution. Here's an article with a chart of the clients that do and don't support media queries: https://litmus.com/community/learning/49-which-mobile-email-clients-support-media-queries    I've run into this kind of issue quite a few times with different design teams and sometimes the advice you get works better for the designing than it does for the functionality and end-product, this might be one of those times.  One of the "little big things" about an approach like this is that you've got to setup both images (and remember one of them is always hidden) so it's a little harder to get it right consistently unless the same one-or-two people are doing it over and over (this approach gets muddy/fails at scale).    One other thing to mention here is that it might make sense to start thinking of email (and web stuff) as mobile-first -- which means you design and code for mobile (since it is the least capable across the board) and then adjust for larger devices with things like media queries. This might mean that the images and stuff you get from design needs to be more 'scalable' - but it'll also help to eliminate the need to work twice as hard (make two versions of the same image for example) to accomplish just about the same thing if you started with mobile-first in mind when designing the first image in the first place.   All-in-all, spotty support at best as of today as far as Im aware, so it wouldn't be something I'd want to put into play (it might even be a step backwards for the sake of aesthetics) and wouldn't be something I wanted to manage or QA b/c it adds a hidden layer of complexity to the end-to-end process of getting an email out the door.       ... View more

Hey Regan,   You might try to see if you can get another LP using the same template to spin up to make sure it's not a template issue. Then you might try and clone the LP and edit the clone to see if maybe it's something corrupt with the LP itself.   Do you see the Element and Variable panel populate or are those blank as well? I've run into pages that take a long time to load the first time I opened them and usually try to refresh the browser inside the editor to try and jump-start the process, you might give that a shot as well.    ... View more

Hey Souvik,   The way I tackle this is to leverage the ".mktoValid" class on the <select> element which appears after the input is interacted with on the page (and the validation returns valid/invalid). Before the field is interacted with, it'll lack both the .mktoValid and .mktoInvalid classes, so you can style the "placeholder" version of the select element by using the ":not()" CSS selector and targeting the .mktoValid field.    EXAMPLE: /* |>> Select element, not-valid state ..... */ form.mktoForm select.mktoField:not(.mktoValid){ color: #ddd !important; }   I'll use this in conjunction with CSS that targets the valid and invalid states as well (select.mktoValid | select.mktoInvalid).   Let me know if this works in your situation or if there's anything else I can help out with here.   ... View more

This is really a really clever way to extend the native functionality for images in Marketo, and I love that you can set it to one or many elements in the document - that's a rich feature 👍   So aside from the one-to-many relationship this could create, is there any reason to do this rather than using a string variable to set the background-image property on the parent element instead of using an <img> element? I get that you can explore for your image in the dialog that pops up, but if you already know the name of your image, you can find it all the same in the Design Studio Image/Files folder and grab the URL from there all the same. Why would you want to do something like this in this first place instead of using the native functionality, can you help me understand the use-case this solves for?   ... View more

Hello Talia,   There's a few way to think about adding styles to a Marketo form. The most common in my experience is the "Custom CSS" input on pg. 2 of the form editor (it's under the purple gear icon on the right hand side of the editor). Here's is where you can put Custom CSS for "this form only" that'll travel with the form wherever it shows up (inside or outside of Marketo).  Another approach might be to put the styles on the template or attach them to the template in an external .css file and put a link to that stylesheet on your template. This would allow you to make seamless updates to the styles by editing the .css file and then replacing that file in Marketo rather than having to edit the form or template and reapprove everything afterward. This is my preferred approach. The good (and bad) thing here is that this will affect all forms on LPs using this template, but will not travel with the form to another LP (not on this template) or an external page -- unless you also add a link to the stylesheet there as well. Yet another way to do this would be to use the "Landing Page Action" dropdown in the top left of the editor and click into the "Edit Page Metatags" section. There's a spot in there for CUSTOM HEAD HTML where you could include a <style> tag with some Custom CSS that'd apply to "this page only". This is a good way to go if you just wanted to update one LP w/ these new styles and didn't want them to appear on every page.  I had a look at the link you shared and it looks like setting the margins to auto might not work to really center the form on the page. One of the things that's offsetting the form is the labels which have a fixed width and can probably be hidden w/ some CSS. Beyond that the form has a fixed width that's greater than the fields (which also have a fixed width) so you end up w/ some add'l spacing on the right side of the form between the end of the fields and the edge of the form.  I put together a stylesheet as a project for the community which you can find here: https://nation.marketo.com/t5/Product-Discussions/Fluid-Responsive-Marketo-Form-CSS/m-p/114061#M73685. This (or something like it) might help to remove the fixed widths on your form elements. At very least, you can have a look at the stylesheet on the demo page to get an idea for which selectors to use to target different elements on the form.   Let me know if you're still working on this, I'd be happy to help put together some CSS in the inspector to try and iron out a few of the kinks here and get this form centered on the page the way you'd like.   Thanks, Dave ... View more

At a glance, the code looks right, but like Sanford said it's hard to be sure until it's in the code-view. If re-approving the LP doesn't work, here's a few other maybes... If you're using the same page to test this, there is a chance that the script got cached or something like that and it's not loading the new version w/ the updated text. If this is the case, you can try opening the page in Incognito mode or adding a trailing query string value to your URL to emulate a new page load -- sometimes doing a "hard-refresh" (Ctrl+f5 on PC) in the browser will set this straight as well. If this code lives on your template, it's probably not a caching issue, but it might be worth trying a few simple things like making a new page or refreshing your browser and/or Marketo session.   If you're able to share a link to a live example that'd also be helpful to see what the output is here, maybe there's something that'll give a clue about what's going on behind the scenes. ... View more

Hey James,   Im willing to bet it has something to do with the mso-line-height that's set on the parent <td> around your image. Outlook likes to think that by "line-height" you meant "height" and will clip an image about "a line tall" when it reads these kinds of rules (I'm pretty sure normal "line-height" will create this display behavior as well).    You could try first removing the line-height from the <td>. You might also try removing the <p> tag(s) all together from your email and instead using either a <div> or <td> with inline styling. <p> tags have different "default" CSS in different email clients and lead to some inconsistent renders when you compare the Outlook version to the Gmail version, for example. If you're using the <p> for the 'built-in' spacing below the element, you can always accomplish that with another row that contains a "spacer" cell with a fixed height: <tr><td height="10" style="height:10px;">&nbsp;</td></tr> ... or something like that.   Let me know if that worked, if not, post an image of what you see once you remove the <p> and line-height and I'd be happy to have another look. ... View more

The only reason I can think of that you'd want to use two different versions of an image would be if you were including text as a part of the image, is there another use-case or reason to have it setup this way? I've usually seen this kind of approach to replace an image with baked-in text to something sized for mobile with larger text (so it doesn't scale the fonts down proportionally).    Another way that you could handle this would be to use a background-image with live-text on top of it. This way you'd only need to use one image (in the background) and the text would be independent of the image scaling so you'd end up with readable text but a smaller image behind it.  If you're after an approach that scales, this works really nicely in a tokenized setup because you can "interact" with the text in Marketo (as compared to a flat image that includes text that you have to edit in something like Photoshop) - you can make it a token, or just edit it manually in the editor. One of the main differences/trade-offs in using a background image is that the image itself shows up big enough to cover the entire area of the module and then gets clipped on the edges that overlap.  This comes into play if you're using images with a main subject or focal point like a person's face or product snapshot or other scenarios where you wouldn't want the image to get clipped. If you use something more "wallpaper-ish" or patterned in the background it ends up working out a little better, and as a design-choice is easier to scale than subject-oriented imagery in general.   ... View more

The paths are different here, but maybe it'd be possible to adhere to a strict naming convention and use something like a token or string variable to change the image path for both of the images using a single variable.   For example,  story1_desktop.jpg and story1_mobile.jpg could be written with variables as: ${Img-URL}_desktop.jpg and ${Img-URL}_mobile.jpg and the value of the string variable would be "story1". As a string variable it might look like: <meta class="mktoString" id="IMG-URL" mktoname="Image URL" default="story1" mktoModuleScope="true"/> and in your code it'd look something like: <head> <style> @media only screen and (max-width: 599px) { .story1_mobile_background {background-image:url(/images/${IMG-URL}_mobile.jpg) !important; } } </style> </head> <body> <!-- Hero Module Without CTA --> <table class="container_module" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="margin:0; vertical-align:top;"> <tbody> <tr> <td class="story1_mobile_background" align="center" valign="top" width="100%" background="/images/${IMG-URL}_desktop.jpg" style=" background-image:url(/images/${IMG-URL}_desktop.jpg); background-repeat:no-repeat; background-size:cover; background-position: center center; margin: 0;"> <div style="visibility:hidden; display:none; color:transparent; height: 1px;"> <img src="images/spacer.gif" alt="" height="1"> </div> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:171px;"> <v:fill type="frame" src="/images/${IMG-URL}_desktop.jpg" /> <v:textbox inset="10,10,10,10" v-text-anchor="top"> <![endif]--> <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top;"> <tbody> <tr> <td class="padding_top_60 padding_right_100 padding_bottom_60 padding_left_23 text_26" width="100%" valign="top" align="left" style="color:#ffffff; vertical-align:top; padding: 30px 290px 30px 40px; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:35px; line-height: 37px; -webkit-text-size-adjust:none;"><span class="text_26" style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:35px; line-height: 37px; color:#ffffff;"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></span></td> </tr> </tbody> </table> <!--[if gte mso 9]></v:textbox></v:rect><![endif]--> </td> </tr> </tbody> </table> <!-- End of Hero Module Without CTA --> </body>    You'd need to make sure the first parts of your image's path were exactly the same and the last parts were always "_mobile.jpg" and "_desktop.jpg". I might even think about changing this to a ".png" instead of ".jpg" if you go this route to allow for the use of transparent images when necessary. This might also work with tokens, but I've only tested something like this quickly to confirm that the image would render in the preview panel using this method. I didn't send a test email, so you'd want to make sure everything is coming thru as expected, but this might help to accomplish what you're after here.    Let me know how it goes if you do give it a try. ... View more

Knak has a templating tool that'll do something like this -- you can modify stuff on their platform and then import your work there into Marketo, they've been at it for a while and from what I hear it's pretty easy on the end-user. If you're using "just some email layout builder tool", there is a "Marketo layer" to think about if you go this route -- I wouldn't expect most tool to produce "Marketo-ready" html but they'd probably suffice to build out an email layout. One thing to be really aware of is that Marketo's Email 2.0 is module-based rather than "layout" or "template" based so the architecture of the template itself is more like a collection of modules than a "layout". Both the modules and the variables that make it super easy to update stuff have Marketo-specific syntax so this is something that you'd want to kind of lay over some HTML you made outside of Marketo. There are a few rules to check out in terms of the Container and Modules - specific elements and classes that need to be added for your email template to be valid. Here's a link to some of that syntax and examples that I keep bookmarked b/c it's a really useful resource for getting your custom HTML templates to gel with Marketo: Email Template Syntax - Marketo Docs - Product Documentation. If adding this code isn't something you're familiar with, it might still save you some time to spin up a design in whatever web tool and hand that off to a developer who should be able to wrap your code in some basic Marketo syntax pretty quickly which saves you some time on development. ... View more

I haven't seen anything like this before, but I normally stay away from the "mktoImg" class all together unless it's really needed to lock an image into the background or something.  1. You might try and use a "mktoText" area there instead since that seems to be working for the text and buttons and then use the Rich Text Editor's toolbar "Add/Edit Image" to get a similar interface for editing your images.  < div class = " mktoText " id = " Section1-Image1 " mktoName = " Sec1 Image #1 " > < img src = " http://www.fpoimg.com/300x300 " alt = " placeholder " /> </ div > ‍ ‍ ‍ 2. If you'd prefer to go the 'mktoImg' route, you might try using a parent div instead of applying it directly to the image. On the parent <div>, you can add the 'mktoImgClass' attribute and put the "img_col" and "img_col_1" classes in there instead of in the class="" attribute on the actual img element. Here's a link to add'l syntax for the 'mktoImg' widget: Email Template Syntax - Marketo Docs - Product Documentation  The <div> approach might look something like this: < div class = " mktoImg " id = " exampleImg " mktoName = " Example Image " mktoImgLink = " http://www.marketo.com " mktoImgClass = " img_col img_col_1 " > < a > < img style =" border : 10px solid red ; " > </ a > </ div > ‍‍‍ ‍ ‍ ‍ *Note: the <img> is just a plain ol' image (optional inline CSS if you'd like). The class, link and target, etc can be set in the attributes on the parent div to pass to the <a> and <img> inside, rather than having that stuff on the inner elements (a, img). Let me know if either of these work for you, I'd expect the first to be more fail-safe and the second to be a bit closer to what you've got setup now using the mktoImg class, but maybe more pieces to the puzzle there. Happy to help out more if this doesn't iron it out for you, lemme know what you run into next. Thanks and good luck! Dave ... View more

Hey Alison, would you mind marking my solution as "correct" if it worked for you? It'll close out the question (make it a green icon instead of blue) so that folks can see it's been answered if they run into something similar. Thanks again and let me know if there's anything that's not working here, I'd be happy to help out where I can. -Dave ... View more