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

Hey Malcolm, Im using the Chrome inspector tool (F12 on a PC). In the screenshot below, I've found an email and clicked into the "Preview Email" view. In this view, your variables are rendered out into the code. The catch here is that your images may use a different proxy path (url) so those all need to be updated still which can be a little bit of leg work. Walk thru: 1) Right click in the margins (lt gray) to bring up the browser menu in Chrome and select "Inspect" (or just use F12 on a PC).  2) click the selector tool in the top left of the Inspector and then click again into the left margin -- this'll take you to the <body> tag in the code. Just a few lines up from there, you'll find the <html> tag which has the translated code (no variables).  3) click on the <html> tag, then right click to bring up the inspector menu. From there choose "Copy" > Copy Element to add the <html> element (and everything inside it) to your clipboard. 4) paste this into your favorite code editor, replace the image paths and do a happy dance Let me know if you run into any issues with this approach, happy to help out more if I can. -Dave ... View more

Hey Jo- This most likely has to do with the proportions of the container (maybe 16x9) compared to the proportion of the video (maybe 21x9). I don't think the Marketo Starter templates are setup to handle this kind of thing, but we might be able to get away with adding some Custom CSS either to the template or via the LP Editor (under Edit Page Metatags > Custom Head HTML) that'll help address the issue. Could you let me know which template you're using from the library, and where you're adding the video?  If you've got a link to preview the approved version of the page that's showing this error, that'd also be really helpful for anyone in the community to help troubleshoot this. Are all of your videos widescreen, or do you have some that are normal and some that are widescreen?  If they're all a standard width, it'd make sense to update the template so that ANY video you put on the page will get the widescreen treatment. If not, it might make sense to either add this "as-needed" in the Custom Head HTML input and/or develop a toggle for the video element that'll allow you to switch between "widescreen" (21x9) and "normal" (16x9) modes. ... View more

Hey James, I agree this isn't really a helpful default that Marketo sets out-of-the-box. You can adjust this setting for both LPs and EMs under the Email section in the Admin menu.  Admin > Email > Edit Text Editor Settings > change both dropdowns to "none".   By default, the LPs are set to have a <div> around the content and the EMs are set to have a <p> around the content. Another thing that I've noticed is that you'll occasionally get a "not-so helpful" hand with <br> tags being injected into empty divs inside an editable area >> EX. <div class="spacer"></div> becomes <div class="spacer"><br></div>. To work around this, I'll usually put an empty comment tag inside the empty element >> EX. <div class="spacer"><!-- --></div> and this seems to prevent the <br> from getting added.  Hope this is helpful, let me know if you run into any issues changing this.  ... View more

Hey Vikram, here's my two cents... Also trying to understand- what if a HTML formatter is provided in the editor, would it suffice? I think the biggest help here would be to take the EM 2.0 framework and apply it to landing pages. It's nice to be able to format the html but those tool would probably need to be more open-ended so they could be dialed into more specific brand requirements. The Rich Text Editor is really either A) slowing down anyone who knows html -or- B) confusing a lot of folks that don't know html (things like copy/pasting from word, the way the editor handles styling w/ spans, divs, etc).  An example of something more like the EM 2.0 framework w/ LPs might be as simple as adding in similar variables - list, number, image - to allow a user to choose a color from a dropdown instead of using the RTE to add add'l html to color the text. There's an idea in the community here:   that's along these lines. Overall, I think the biggest challenge with designing in Marketo is two-fold -- 1) getting it right the first time (a solid foundation) and 2) being able to make changes that are more "error proof".  Editing emails was always a pretty thorny subject until EM 2.0 came along and now with the combination of modules and more variables, it's easier to make design-type (color, font-size, etc) changes without impacting the overall code-base. Something like this might be a huge win for Landing Pages as well and address the same problem with a proven solution. Or having a set of predefined templates helps?  Templates age.... quickly. I think providing a collection of templates is something that either needs to be more crowd-sourced or maybe something internal that a team would stay up on and support (but this is more expensive for sure). Once upon a time, shortly after the release of EM 2.0, Marketo ran an email template contest that I thought was a pretty good example of how to get the community involved and provide more current template code to "update" the library. Perhaps there could be some kind of "badge" in the community or something that'd help folks who do make templates get recognized and maybe earn some new business in the process. Check out https://themeforest.net/ for inspiration - they're a template marketplace (so maybe some big-picture ideas here) and if you check out any of the templates, you'll notice some badges for the authors that help to "certify" their work over time (eg. "street cred"). Regardless of the approach here, it might also be worth it to think about this issue in terms of "modules" rather than templates -- they're more granular so updates can be singular or en-mass which makes them more manageable and it might also allow users to create their own templates which might be the biggest win overall here.  In the simplest terms, a "module" would be the same thing as it is for Email 2.0, just for Landing Pages. Maybe in a more "futuristic" application, you could drag-n-drop modules onto a  template  and those modules would be preset with all the variables, CSS and HTML you'd need for that specific piece. In this way, modules could be used to build templates once the blocks were setup and/or they could be used to add/edit the actual Landing Pages similar to the EM 2.0 experience now. ... View more

While there is a bootstrap class you can use here for images (.img-responsive) -- and it looks like you've already got that in play on this page -- I usually go about this another way so that I don't have to keep adding a class to every image I put on the page.  The issue we're seeing here is that when you add an image to your LP (or change/update an image) Marketo will automatically add the height="" and width="" attributes inline to the image element. < img src = " https://info.cerulli.com/rs/960-BBE-213/images/US%20ESG%20Banner%201200x300.jpg " width = " 1200 " height = " 301 " constrain = " true " imagepreview = " false " class = " img-responsive " > ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ As a best-practice you'll want to remove that height and width whenever you change the image. It's really annoying b/c it always happens and there's not a way to deactivate this functionality, instead you've got to take a few extra steps to delete the height and width once you change the URL of the image in the pop-up image editor. This step isn't necessary if you're using classes to control the height and width , but it does create a need for some CSS to do just that. The class you've got on there "img-responsive" is telling the images to be: 1) at most 100% wide [max-width:100%;] 2) proportionate in height [height: auto;] 3) displayed like a block rather than an inline element [display:block] To short-cut the need to add this onto each of your images, I usually just add some CSS that applies to ALL images instead of a class that needs to get added to each. Here's what that looks like: /* make all images responsive */ img { max-width : 100% ; height : auto ; display : block ; } ‍‍‍‍‍‍ ‍ ‍ ‍ ‍ ‍ ‍ --------------------------- EXTRA CREDIT: I noticed when looking at the page that there was some room to horizontally scroll the page to the right. I had a quick look to see if I could find anything sticking out into the right margin and didn't find anything, but this is usually some combination of the rows/columns in bootstraps extending beyond the viewport (rows have a -15px margin left/right for example).  Here's a screenshot where you can see the extra space to the right and where I've scrolled over to point this out. To get rid of this bottom scroll bar, you can hide the overflow on the x-axis (horizontal) by adding a little more CSS to your stylesheet / template. Here's what that'd look like: /* hide bottom scrollbar (horizontal) */ body { overflow-x : hidden ; } ‍‍‍‍ ‍ ‍ ‍ ‍ Cheers, Dave ... View more

As a voice of reason, even when my favorite brands send me an email that is really long I don't think I've ever read it top to bottom. There's usually a thing-or-two that I'll tune into and skip over the rest. In these cases in my experience there could have been more thought put into either: a) doing some specific targeting (dynamic content) to get me just the content that I'm interested in -- this is probably the best way to pare down a long newsletter in my opinion, or b) just add less to your newsletter -- it's generally not a case of more-is-more with customer facing communications. The best brands send direct email that relates specifically to the products/interests I've engaged with and focus really tightly on converting that interest via a call-to-action into some kind of conversion.  You could think about checking your email reporting for your newsletter and see if your open and click-thru rates are going up in proportion with the amount of content (unlikely) or maybe try a more limited run of the newsletter and see how that goes -- do you get more clicks and conversions or not? Maybe look for things that actually do get clicks and focus on those areas a bit more in the newsletter and let some of the "extra" stuff kinda fall to the side or be more like follow-up material that's not wrapped up in a super-long newsletter.  I completely agree with Grace and Sanford here about the accordion stuff for email, you've really gotta be careful these days b/c there are businesses out there that are selling things that don't really work as well as you'd expect them to or that aren't as "clear" about disclosing the limitations of their offerings ... let's be real here, who can honestly send out a Marketing email these days that excludes Outlook in any capacity?  *Practical Footnote: Be careful with "hiding" content behind accordions and slides, while you might think it's better to jam a bunch of information into a small bit of real estate, you'l also want to carefully test this and make sure that folks are actually finding this stuff and reading it. I've seen conversion rates tank (for LPs) b/c of this exact thing -- nobody clicks (or presumably reads) the content on the 2nd and 3rd slides of a carousel or accordion. As a rule of thumb if the content is not "good enough" to occupy an unhidden piece of real estate in your newsletter, it's probably not important enough to include in the first place (in this specific setting, maybe a 2nd non-newsletter email would make a better fit).  One final thing to consider here is what I've always heard called "putting lip stick on a pig" -- generally, it still doesn't make you want to kiss the pig. In a way, these kind of "flashy" technological solutions are a bit of lip stick and a super long email that's not carefully curated for your audience is the pig. Not sure if this is the case with your newsletter, but I've seen it too often in my inbox and working with different clients over the last few years. In these cases, no amount of technology (lip stick) is going to solve the basic problem of content overload or saturation. The solution in these cases in more process and refined content than technology and magic -- spend the same amount of time considering the content for your newsletter that you'd spend on getting some accordion magic to work and I'd bet you'd have better results (and also save some money on the lip stick).  ... View more

Hey Brian,  Sorry to leave you hanging on this for a while, I've finally gotten a chance to go in and set something up to share as an example. I've included a screen cap below of what you should be seeing as the browser window goes from desktop-to-mobile and back. I've added some outlines around the checkboxes field as well as each of the labels inside so you could kinda "see" them a little better. -------------------------------------------------------------------------------------------------------------------------------------------------------------- Here's a look at the CSS that I've added into the Custom CSS on the form via the form editor and a few notes: The top portion of this modifies a few form elements -- you may need to adjust some of the styles here to get this to mesh with however you've got your responsive (fluid) styles setup now for your form fields. This is only written for the checkbox field. If/when you can share your CSS and Form (live preview) I can probably help shore up anything outstanding here that doesn't fit with what you've got already. The bottom portion of the CSS is a repeating set of rules for the checkbox inputs and labels at various breakpoints. The idea here is that we've got the mobile styles at the top (mobile-first) and then change the CSS as we head toward a larger display (tablet,desktop).  ** This is setup using the "Labels Left" option (default) in the form Settings tab. If you're using "Labels Above" the CSS would need to change a bit. /* Add your custom CSS below */ /* Make form elements full-width and fluid (100%) */ form.mktoForm, .mktoFormRow, .mktoFormCol, .mktoFieldWrap, .mktoLogicalField { width : 100% !important ; } /* Hide labels -- use LABELS LEFT only! */ label.mktoLabel { display : none !important ; } /* Put odd # inputs (1,3,5...) on a new line */ form.mktoForm .mktoLogicalField input:nth-of-type(odd) { clear : both ; } form.mktoForm .mktoCheckboxList { padding : 0px !important ; } form.mktoForm .mktoLogicalField input { width : 20px !important ; } form.mktoForm .mktoLogicalField label { width : 90% !important ; float : left !important ; display : inline-block !important ; margin-left : 0px !important ; margin-right : 0 !important ; } @media screen and ( min-width : 480px ) { form.mktoForm .mktoLogicalField input { width : 20px !important ; } form.mktoForm .mktoLogicalField label { width : 42% !important ; float : left !important ; display : inline-block !important ; margin-left : 0px !important ; margin-right : 15px !important ; } } @media screen and ( min-width : 576px ) { form.mktoForm .mktoLogicalField input { width : 20px !important ; } form.mktoForm .mktoLogicalField label { width : 44% !important ; float : left !important ; display : inline-block !important ; margin-left : 0px !important ; margin-right : 2% !important ; } } @media screen and ( min-width : 768px ) { form.mktoForm .mktoLogicalField input { width : 20px !important ; } form.mktoForm .mktoLogicalField label { width : 45% !important ; float : left !important ; display : inline-block !important ; margin-left : 0px !important ; margin-right : 2% !important ; } } @media screen and ( min-width : 991px ) { form.mktoForm .mktoLogicalField input { width : 20px !important ; } form.mktoForm .mktoLogicalField label { width : 46% !important ; float : left !important ; display : inline-block !important ; margin-left : 0px !important ; margin-right : 1% !important ; } } ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ You should be able to pop this CSS into the very bottom of your Custom CSS to give it a whirl. Let me know if you've got any questions or if you run into any issues. -Dave ... View more

Hey Alison,  This is actually a silly problem with load order of the form styles that's keeping you from seeing your CSS. What's happening is that Marketo is loading the CSS you've added into the <head> of the document (at the top) and then is loading the form's CSS inline with the form (below). The way CSS works is that the last (or most bottom) style is what gets rendered on the page -- in this case it's the native Marketo Form CSS that's overriding your custom CSS. To get your CSS to override the form's CSS (when it comes before the form's CSS) you can simply add an "!important" flag onto your rules and that'll tell the machine that even if it comes before that it's the style that should show up. /* button style */ .mktoButton { background : #ff7e21 !important ; color : #ffffff !important ; border-color : #ff7e21 !important ; box-shadow : none !important ; font-size : 0.875rem !important ; padding : 0.625rem 1.125rem !important ; line-height : 1.5 !important ; border-radius : 0.2rem !important ; font-weight : 700 !important ; font-family : 'Open Sans' , sans-serif !important ; text-shadow : none !important ; } .mktoButton:hover { background : #ff9b54 !important ; color : #ffffff !important ; border-color : #ff9b54 !important ; } ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ Here's a few other tips that I noticed looking at this page: > You probably don't want to use the Marketo Button picker, it only makes it harder to override your button styles. I usually go with the default styles and then use the Custom CSS to style up my button (so I've got more control).  > Another thing I like to make sure is setup on my forms is to use the (7of7) Plain theme. This adds the least add'l CSS to your forms and basically creates less stuff to have to override in your stylesheet. > For what it's worth, any styles beyond the button styles that are already declared in the Marketo Form styles will need to get the !important flag as well to override those styles -- for the inputs and row and columns and stuff. > I'll usually use the Custom CSS option on pg2 of the form editor (under the purple gear on the right side of the page) rather than the Theme CSS. The Theme CSS has to do with all the extra styles that get added when you pick 1 of the 7 themes for your form. Hope this helps, let me know if adding those important flags doesn't clear this up and I'll take another look. -Dave ... View more

Hey Nerea, the way these cookie notifications are deployed is usually thru a script that adds some HTML for the "pop up" and then either some styles that get injected by the script or some styles that are already in the <head> (in a <style> tag or attached in a stylesheet) to make it pretty.  The words that show up on in the pop-up would be a part of the HTML component.  IF you're using a script to populate the pop-up: You'll want to find the HTML that's getting created in the script and replace that with a variable, ex ${Cookie-Text}. This'll allow you to edit the text per-page by updating the variable (text) on the Landing Page. IF you're using a section on the template to create the pop-up (is hard-coded): Another way to go about this would be to just code the pop-up into your template instead of injecting it via script. If you're going this route you should be able to create an actual editable area for your content since the code for the pop-up will be  on the template so it can be read by the editor (whereas an editable area injected by a script wouldn't show up as editable in the editor).  ... View more

Here's a link to the Marketo EM syntax, I keep it bookmarked to refer to when this kinda stuff comes up: Email Template Syntax - Marketo Docs - Product Documentation  In the screen below, I've highlighted the bit that's appropriate to the fix you'll need to put in place here. Note that there's kind of a connection between the element you put the "mktoContainer" class on and the type of element the "mktoModule" class has to go on. In most cases, the "mktoContainer" should be the "outer wrapper" that goes around everything (I prefer to use a table) and then the modules are the very next element inside of that (for tables, it's a table-row).  In the scree below,  the <table> at the top of the <!-- Header Module --> part is where you've currently got the 2nd "mktoContainer" class (the one that's calling the error for #mainContainer (an element with an id of "mainContainer"). If you were to change this table's class to "mktoModule" and then eliminate the "mktoModule" from the <tr> just below that it should help iron out the issue here.  Then, you'll want to make sure your next module is also a <table> with the "mktoModule" class and that it's also nested directly inside the <td> container just like this one.  Let me know if that worked out to solve the problem here or if there's anything else I could do to help out? ... View more

Hey Brian- Check out the thread here: Fluid Responsive Marketo Form CSS - Courtney added a link to a CSS file that'll help support multi-column layouts. You should be able to drag-n-drop your columns next to each other in the editor and then the CSS should do the rest to get those to show up the same as in the editor.  For what it's worth, you might be further ahead trying the "Plain"  (7 of 7) theme for the form, it'll add the least styling on the Marketo-end and make a little less work in getting it to gel with your website CSS. ... View more

The double-tap issue (specifically for iOS) has something to do with the way the front-end is coded. It boils down to changing the display of an element using the "hover" state. Since you can't "hover" on an iPad, iOS fires the hover state on the first tap and then the link on the 2nd.  Here's a link to more info on it: Fixing the iOS Mobile Double-Click Link Issue | Toma Nistor - San Diego Web Developer  ... View more

It's a little off-topic in terms of using the native Marketo Form Pop-Up but if you're building with Bootstrap I find it's easier to include a modal (pop-up) that contains your form and then it's much easier to change the trigger (or have multiple triggers) that fire the modal with your form inside. Here's a link to the Bootstrap modal information if you're curious about how that works and the different options you'd get out-of-the-box: https://getbootstrap.com/docs/4.3/components/modal/  ... View more

Hey Chelsea, It looks like the reason this isn't responsive is that the "wrapper" class is modified in CSS to have a fixed width of 960px so when you're on a small screen it just kinda pushed out the right side of the screen. To get this to line up a little better, I've written a few styles below in a media query which will target screens up to 991px wide. For anything larger than 991px (a standard desktop breakpoint) the wrapper having a width of 960px is ok, b/c that's less than the screen width. @media screen and ( max-width : 991px ) { .wrapper { width : 100% ; } /* override fixed 960px width */ body { padding : 0 ; } /* remove body padding */ footer#footer { padding : 25px 20px ; } /* apply footer padding */ } ‍ ‍ ‍ ‍ ‍ Here's a run-down of what this code is doing line-by-line: 1. Begin the media query  2. Adjust the wrapper class' width 3. Remove padding from the body -- the sections are already padded L/R. 4. Add L/R padding to the footer which is the only section without it. 5. End the media query To put this into play on your template, you'll want to grab the CSS above and paste it just inside the closing style tag (</style> in the head of your template (on line 241)). ... View more

... and for a little icing on the cake... While it doesn't make a difference in terms of the file path, I still like to setup a folder structure similar to what you'd see outside of Marketo. When I create a new template, I'll create a new folder inside the images/files folder for my template and then nest the "sub-directory" folders inside that. Something like: > Images/Files  19q3 LP Template Assets images css js All the files will still come from the same ".../images/" folder in Marketo, but this lets me stay a little more organized as I work and I think it's helpful for anyone who'd come behind me to pick up this project in terms of being easy to understand and find things.  ... View more

I like the idea of having some kind of toggle that'd include (or not) the forms.css file automatically.  I supposed it'd still fall under the "workaround the styles" part you already mentioned, but another way to go about this is to just use CSS to override the styles. Generally, you're going to need a stylesheet to address the styles for each different field type anyway, the only real difference here is that you've got to target the elements on the form the same way (or more specifically) that Marketo does to override the styling. Once you've kinda got the "scaffolding" (the group of selectors that Marketo uses to style the forms which can be harvested from the stylesheet in your browser's inspector) that's appropriate for Marketo form selectors, you can continue to use that for other forms to override the styles. In most cases that I've seen, Marketo's CSS (selectors) are more specific than other CMS's selectors (ex. form.mktoForm {...} vs. form {...} ) and should override most of your website's CSS.  Here's a link to some more info on a basic CSS scaffold that's got most of the selectors written out for reference with some inline comments to help make sense of it all: https://nation.marketo.com/message/213274-fluid-responsive-marketo-form-css  ... View more

Hey Mr. Dude -- love the name, love the idea! How do you imagine this would integrate with a Marketo form -- would it be a stand-alone service that pushed to a hidden form or something that you could use within the Marketo form editor experience? One of the challenges we see often for clients is customizing forms (adding fields and logic) and styling forms (adding CSS/dealing with native Marketo forms CSS) so I think this would be a big step forward for lots of folks. I've tinkered around with adding a few of these pieces (Multistep, conditional, nice designs) w/ HTML, JS and CSS inside a RichText element on a form and had varying degrees of success with it, I'd be willing to provide beta feedback on something like this if you'd benefit from an extra set of eyes / ideas, just DM me when you're ready. ... View more

Hey Diana,  What is a "comprehensive full stack of web dev as a service" that you're looking for -- like what would you need to get developed? Is stuff for Marketo or more like a website outside of Marketo? Most of the agencies you've listed here I've seen in one-form-or-another turn out full-stack solutions, chances are pretty good that someone in the mix there can help you to accomplish what you're after (if it has anything to do with Marketo).  A lot of times there's a "run of the mill" (normal) setup and structure for Marketo projects that the sales teams are more aware/aligned with but I'd imagine any one of the companies you've listed above could help get most things into play and a few of them could probably do-it-all. What you really want to be looking for here (in my opinion) is: 1) Depth of Marketo expertise - there are tons of full-stack developers out there but making sure they are fluent with Marketo can make all the difference. 2) Short-term cost vs. Lifetime value - there are also tons of developers that can get a custom solution into play that trend from cheaper to expensive in costs and short-term to long-term in terms of solvency. Instead of looking at the short-term (up-front) cost of a complex project it might also be helpful to view it in terms of the lifetime value of the solution. I've personally come across many situations where we're asked to fix something that was either done in a hurry or on a budget and is now creating a problem instead of a solution. For this reason, I really recommend getting a good feel for the depth of an agency's work and knowledge base before considering the dollars and cents of it. 3) It is always helpful to have a clear idea of your expected outcomes and requirements to talk thru with an agency and see about what is/is-not possible within the context of Marketo -- most things should be possible in one way or another for an experienced team. ... View more