Dave_Roberts
Level 10
Ann Arbor, MI
Developer
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
yesterday
|
Top Badges Earned
Customize up to 8 badges at the top of your trophy case for all other Community members to see!-
Unlock
Earned on 2.08.21
Earned by 25 people
Select to learn more
-
Applaud 250
Earned on 8.03.21
Earned by 26 people
Select to learn more
-
Give Back 300
Earned on 3.18.21
Earned by 35 people
Select to learn more
-
Affirm 25
Earned on 2.08.21
Earned by 41 people
Select to learn more
-
Coach
Earned on 2.08.21
Earned by 70 people
Select to learn more
-
Boost 100
Earned on 2.08.21
Earned by 109 people
Select to learn more
-
Contributor
Earned on 2.10.21
Earned by 243 people
Select to learn more
a month ago
Hey Max,
How are you editing the modules? Are you using the Edit Code button, just changing text inside the module on the canvas or adjusting some toggles/variables in the far right sidebar?
I've had this happen to me before when Im working on editing the code-view of an asset (LP mostly) and I preview the page before the "Auto-Saved" thing pops up in the top right of the editor. Especially when Im on a slow connection, it takes a few seconds after each change for Marketo to auto save the updates and I've found that jumping too quickly into preview mode and then back in for edits will lock up the code like this where it doesn't save changes. This mostly happens when Im editing the template code and using the preview button, but it might happen other places as well. Im not sure if it's the problem here, but I'll always try and keep an eye on that "Auto Saved" spot at the top right (see below) and try not to use the Preview until that's ready (sometimes it does the "saving" > "auto-saved" thing twice, so just give it a minute to settle down before you go on).
Look for "auto saved" before proceeding
... View more
09-07-2021
10:08 PM
This solves the problem aesthetically but it breaks the pairing of the input/label relationship and would fail accessibility testing b/c there'd be no relationship between the text (faux-label) and the input "as the computer reads it".
... View more
09-07-2021
10:05 PM
Hey Charlie,
I was able to get something working in the inspector but I needed to edit the setup of the fields just a bit to get it to work. I can't think of a way to get this into columns AND re-orient the layout of the input/label without having some kind of parent element to wrap the input/label combos (floats will only get you to thru the first hurdle here).
Rather than having all the checkbox/label pairs be a single input, I removed all but one of the input/label combos and copy/pasted the form column a few times for the sake of example. I don't know if this'll work in your situation, but if you are able to break up the checkbox field (singular field w/ multiple values) into individual fields (multiple fields w/ singular values), it'll be much easier to work with the layout b/c you'll have a little extra structural html in play (form columns) to work with.
In this example, each checkboxes field (still use the checkboxes field type, even for one input) would have a singular value, so basically take each of the input/label sets you've got in the one field and make a new field for each set. In the form editor, you can drag-n-drop those fields into 3-columns to create the column layout for the form (the CSS below should do the rest).
The trick here is to isolate each checkbox parent element (the checkbox list) and use display: flex to change the orientation of the child elements from "across" to "stacked" to get the inputs up above the labels. The same goes for the rows and columns, the rows are display "stacked" for mobile (flex-direction: column) and "across" for tablet and up (flex-direction: row).
Here's a look at what I'm seeing when I add in the attached CSS into the browser console:
desktop view mobile view
/* display content in a row stacked (for mobile) */
.mktoFormRow { display:flex; flex-direction: column;}
/* flex-grow helps the columns maintain a consistent size */
.mktoFormCol {flex-grow:1; display:flex;}
/* checkbox parent element */
.mktoForm .mktoLogicalField {
width:100% !important;
background:yellow; /* EXAMPLE ONLY - remove for production */
padding:0px;
margin:0px !important;
display:flex;
flex-direction:column;
}
/* fluid width field wrap (override fixed inline width) */
.mktoFieldWrap {width: 100% !important;}
/* fields inside a checkbox list (checkbox fields) */
.mktoCheckboxList .mktoField {
margin:10px auto !important;
}
/* labels inside a checkbox list (checkbox labels) */
.mktoCheckboxList label {
max-width:100% !important;
width:100% !important;
margin:0px !important;
padding:0 10px 15px 10px;
}
/* for tablet and up, display form columns in rows across rather than stacked */
@media screen and (min-width:768px) {
.mktoFormRow {flex-direction: row;}
}
*NOTE: This CSS will only work if the input/label pairs are setup as individual checkboxes fields rather than one aggregated field.
I've added some comments to the CSS here, but let me know if you've got any questions about what any of this is doing. I left the "yellow" background color in there for the sake of example, but that line can be changed/removed for production.
Using this pattern, you can place 3 checkboxes fields in a row in the form editor and just repeat row-over-row to create the rest.
For the line-breaks in the label text, you should be able to set that under the "Values" link in the form editor where you set the "Display Value" for the checkboxes field. Once you click the "Values" link, a dialog pops up that lets you edit the Display Value and Stored Value for the field. The Display Value will accept inline HTML, so you can probably just add a <br> tag where you'd like a line break in there. You should be able to add inline HTML to both the "actual label" of the field (at the very top right of the form editor when you click on a field) as well as the "Display Value" of checkboxes input, all the same.
... View more
09-02-2021
01:11 PM
Rather than having to wait, you can try using the LinkedIn Post Inspector here: https://www.linkedin.com/post-inspector/. This should allow you to "force" LinkedIn to update cached images, descriptions, etc.
... View more
08-14-2021
05:29 AM
I haven't ever used the special characters menu you're pointing out here, but maybe they just aren't translated into the code properly. Would you mind posting the HTML that shows up in the HTML editor after you add these characters to your text in the Rich Text Editor? You should be able to see the HTML by clicking the HTML button on the toolbar. Then to post that in the community thread, you'll want to use the "..." button in the toolbar here and click the "</>" insert/edit code button to paste it into the post.
It might be that these aren't getting added as the entity (non-breaking space) in the code-view?
... View more
08-11-2021
07:59 AM
Im not sure, but Gmail for Android might read styles in the <head> so maybe you could try adding a class to hide the logo on mobile?
... View more
08-10-2021
04:23 AM
Hey Laura,
I don't have access to test this out on Outlook so Im kinda shooting in the dark here, but it sounds like what's happening might have something to do with the MSO-conditional code you've got in between the tables. I noticed that the issue here has to do with the middle column (width 355px) and that that <table> was the only one that didn't have the MSO code to break it up into <td>s. As I understand it, Outlook doesn't like "touching tables" in the code and so you use those bits of code for Outlook only to add in some <td>s around the tables so they can act more like columns.
Im not sure if this'll solve your problem all together but it might help get something moving here. Unfortunately, Im not able to view the code you linked to in drive and it's really hard to troubleshoot without being able to preview the email and also send it off to something like Litmus or Email on Acid for a render test.
I've added another line of MSO-only code here and added a few comments above/below the code so it's easy to identify. You can safely leave or remove those comments.
<tr class="mktoModule" id="Module_10B_Header_Mobile_Different_Logo31">
<td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:0px 0px 0px 0px;">
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; width:600px; table-layout:fixed;" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:0px 20px 20px 20px;" class="em_plrtb_01">
<table width="560" border="0" cellspacing="0" cellpadding="0" style="width:560px;" class="em_wrapper">
<tbody>
<tr>
<td valign="top">
<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->
<table width="560" border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper" style="width:560px;">
<tbody>
<tr>
<td valign="middle" style=" vertical-align: middle; ">
<table width="90" border="0" cellspacing="0" cellpadding="0" class="em_wrapper" style="width:90px;vertical-align: middle;" valign="middle" align="left">
<tbody>
<tr>
<td height="52" style="height:52px;" class="em_h30"> </td>
</tr>
<tr>
<td align="center" valign="middle" class="em_hide" style="border-collapse: collapse; mso-line-height-rule: exactly;"> <a href="http://{{Lead.Brand Website}}benefits/?member_id={{lead.members id}}&name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><span style="vertical-align: middle"><img src="https://promos.ovstravel.com/rs/512-JJP-615/images/USAAPerks_CoreBlue_Vertical.png" alt="FOR USAA MEMBERS | USAA" width="90" height="52" style="vertical-align:middle" border="0"></span></a> </td>
</tr>
<!-- Mobile Show -->
<!--[if !mso 9]><!-->
<tr>
<td height="0">
<div class="em_hide_desktop" style="display:none;width:0;overflow:hidden;max-height:0!important">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly;"> <a href="http://{{Lead.Brand Website}}benefits/?member_id={{lead.members id}}&name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img class="em_full_img01" src="https://promos.ovstravel.com/rs/512-JJP-615/images/USAAPerks_CoreBlue_Horizontal.png" alt="FOR USAA MEMBERS | USAA" width="300" height="36" style="display:block;" border="0"></a> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
<!--<![endif]-->
<!-- //Mobile Show -->
</tbody>
</table>
<!-- new code starts here ----------------------------------------------------------->
<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->
<!-- new code ends here ------------------------------------------------------------>
<table width="355" border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper">
<tbody>
<tr>
<td height="40" style="height:40px;" class="em_h30"> </td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="26" style="width:26px;" class="em_hide"> </td>
<td align="center" class="em_defaultlink em_pbottom25" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding-bottom: 22px;"> <a href="http://{{Lead.Brand Website}}benefits/?member_id={{lead.members id}}&name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img src="https://iceovs.s3.amazonaws.com/SilverPop/Monks/MKG-8321/last_minute_deals/header_logo.png" width="236" height="43" alt="MEMBER TRAVEL PRIVILEGES" style="display:block; max-width:236px;" border="0"></a> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="26" style="width:26px;" class="em_hide"> </td>
<td align="center" class="em_defaultlink" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:bold;color:#303030;"> <a href="http://{{Lead.GoTo URL}}Hotel&member_id={{lead.members id}}&name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Hotel</a> | <a href="http://{{Lead.GoTo URL}}newresortstore&member_id={{lead.members id}}&name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Resort</a> | <a href="http://{{Lead.GoTo URL}}Cruise&member_id={{lead.members id}}&name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Cruise</a> | <a href="http://{{Lead.GoTo URL}}Air&member_id={{lead.members id}}&name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Air</a> | <a href="http://{{lead.GoTo URL}}guidedvacations&member_id={{lead.member id}}&name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Tour</a> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->
<table width="115" border="0" cellspacing="0" cellpadding="0" style="width:115px;" class="em_wrapper" align="right">
<tbody>
<tr>
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper">
<tbody>
<tr>
<td height="40" style="height:40px;" class="em_h25"> </td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper">
<tbody>
<tr>
<td valign="top" align="center" style="border-collapse: collapse; mso-line-height-rule: exactly;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px;" class="em_wrapper">
<tbody>
<tr>
<td width="27" style="width:27px;" class="em_hide"> </td>
<td align="right" valign="top" class="em_defaultlink em_center" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:'Helvetica', Arial, sans-serif;font-size:12px;line-height:18px;color:#303030;font-weight:bold;"> <a href="{{Lead.Brand CallTo}}" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">{{Lead.Brand Phone}}</a> </td>
</tr>
<tr>
<td width="27" style="width:27px;" class="em_hide"> </td>
<td align="right" valign="top" class="em_defaultlink_und em_center" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:'Helvetica', Arial, sans-serif;font-size:12px;line-height:18px;color:#303030;"> <a href="http://{{lead.Brand Website}}benefits/?member_id={{lead.members id}}&name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: underline; text-decoration:underline;color:#303030;">My Account</a> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
Otherwise, the math on the tables seems to add up so that's not a reason that the tables would be breaking over into 2 rows -- maybe it could be something in the stylesheet in the <head>?
... View more
08-04-2021
05:03 AM
Thanks for sharing the preview link, I was able to load that up in the browser and tinker with the HTML a bit.
Here's a look at the updated HTML for that entire module:
<tr class="mktoModule" id="Module_10B_Header_Mobile_Different_Logo31b7761b7a-dee0-402d-8441-34cabbc815fb">
<td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:0px 0px 0px 0px;">
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; width:600px; table-layout:fixed;" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:0px 20px 20px 20px;" class="em_plrtb_01">
<table width="560" border="0" cellspacing="0" cellpadding="0" style="width:560px;" class="em_wrapper">
<tbody>
<tr>
<td valign="top">
<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->
<table width="560" border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper" style="width:560px;">
<tbody>
<tr>
<td valign="middle" style=" vertical-align: middle; ">
<table width="70" border="0" cellspacing="0" cellpadding="0" class="em_wrapper" style="width:70px;vertical-align: middle;" valign="middle" align="left">
<tbody>
<tr>
<td height="40" style="height:40px;" class="em_h30">
</td>
</tr>
<tr>
<td align="center" valign="middle" class="em_hide" style="border-collapse: collapse; mso-line-height-rule: exactly;">
<a href="http://ng.ovstravel.com/ol/h0FQccfGdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymVZNR6znxOgKUQxJP2O_Xy/jExQc83NL1lNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9f-X45jPO1q9q9is--O5ynyNm8qEgdZ89sULeB2Li6Z-jQeljR4q7lL-g5Kx5O0tn2MMjcHruPVS4UqSsXDtdxAOnoxZoYxZaExF7KMljg0eLgnRMZf89ZQ-BrBEP42cX8rtPjqivnyC3YlHrBQf6pxG5hhf4H4sH0yaqq4cq8ALyIwvE8L1lYWy1VsXL_VaAd8TIg3USG9BMau8WeKzJ0NvwzttxiRfQCRa-4uCFLxg6No88jtqvtbmzi960vEH1" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><span style="vertical-align: middle"><img src="https://promos.ovstravel.com/rs/512-JJP-615/images/USAAPerks_CoreBlue_Vertical.png" alt="FOR USAA MEMBERS | USAA" width="70" height="40" style="vertical-align:middle" border="0"></span></a>
</td>
</tr>
<!-- Mobile Show -->
<!--[if !mso 9]><!-->
<tr>
<td height="0">
<div class="em_hide_desktop" style="display:none;width:0;overflow:hidden;max-height:0!important">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly;">
<a href="http://ng.ovstravel.com/ol/h0FQd8zNdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymVZNR6y31OgKUQxJP2O_Xy/jExQc83ILllNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9f-X45jPO1q9q9is--O5ynyNm8qEgdZ89sULeB2Li6Z-jQeljR4q7lL-g5Kx5O0tn2MMjcHruPVS4UqSsXDtdxAOnoxZoYxZaExF7KMljg0eLgnRMZf89ZQ-BrBEP42cX8rtPjqivnyC3YlHrBQf6pxG5hhf4H4sH0yaqq4cq8ALyIwvE8L1lYWy1VsXL_VaAd8TIg3USG9BMau8WeKzJ0NvwzttxiRfQCRa-4uCFLxg6No88jtqvtbmzi960vEH1" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img class="em_full_img01" src="https://promos.ovstravel.com/rs/512-JJP-615/images/USAAPerks_CoreBlue_Horizontal.png" alt="FOR USAA MEMBERS | USAA" width="300" height="36" style="display:block;" border="0"></a>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<!--<![endif]-->
<!-- //Mobile Show -->
</tbody>
</table>
<table width="355" border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper">
<tbody>
<tr>
<td height="40" style="height:40px;" class="em_h30">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="46" style="width:46px;" class="em_hide">
</td>
<td align="center" class="em_defaultlink em_pbottom25" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding-bottom: 22px;">
<a href="http://ng.ovstravel.com/ol/h0FQccHPdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymVZNR6zX1OgKUQxJP2O_Xy/jExQc83OLllNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9f-X45jPO1q9q9is--O5ynyNm8qEgdZ89sULeB2Li6Z-jQeljR4q7lL-g5Kx5O0tn2MMjcHruPVS4UqSsXDtdxAOnoxZoYxZaExF7KMljg0eLgnRMZf89ZQ-BrBEP42cX8rtPjqivnyC3YlHrBQf6pxG5hhf4H4sH0yaqq4cq8ALyIwvE8L1lYWy1VsXL_VaAd8TIg3USG9BMau8WeKzJ0NvwzttxiRfQCRa-4uCFLxg6No88jtqvtbmzi960vEH1" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img src="https://iceovs.s3.amazonaws.com/SilverPop/Monks/MKG-8321/last_minute_deals/header_logo.png" width="236" height="43" alt="MEMBER TRAVEL PRIVILEGES" style="display:block; max-width:236px;" border="0"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="46" style="width:46px;" class="em_hide">
</td>
<td align="center" class="em_defaultlink" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:bold;color:#303030;">
<a href="http://ng.ovstravel.com/ol/h0FQcsHJdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymWZdN0zH5OgKUQxJP2O_Xy/jE9RdMPPLVlNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9O6Ons2achP90-Hdgs68u2Ecpta0jdpIuo0LYD3-lp9mrFK4tE-Tgy6Sx5apyKV1m29Z1PS2AeQroScnOKHlZ_geJmnM5PCs1KzVXC-o8rRmB4CkPIb5fF3ft3igu1DQv1KVc4YD87H3JOSi-anCt_h2g3zC0Jopf7EC3gvMV9QHiElO80ttWcGSAKLvO-0CPSYbfr3IXYcl9Zew1IoC32ujt5YMSqAPeH0Gu4_SXHw5hK_01rtaMytSO8N6jmUzGh2Zm1ytlDikj1zWYZoq-RCYfxqzRtcWKqoLj2hgawD5xC3IoiDzceKQTgk7hOMqA1WehakSDrJyZij77fGg," target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Hotel</a> | <a href="http://ng.ovstravel.com/ol/h0FTccXLdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymZZd50zXBOgKUQxJP2O_Xy/jEBRecPOI1lNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9O6Ons2achP90-Hdgs68u2Ecpta0jdpIuo0LYD3-lp9mrFK4tE-Tgy6Sx5apyKV1m29Z1PS2AeQroScnOKHl_9ASekyY3Iy99Mj9IDKkvnwDesH5Xde4ceSmwxXt2kjpwhP8AmIj1oXSfaXXvACn6_ELzml_0fNFRnXmZj-A06iGKHzfL5sNWQW6ULaaNgXqFZ7HsnQwlGfJ2UtYAPoWz5suJ_PgbrxPzJVbE5ae_ETomGqQ5g9ebmf7zsIyAu2zF3XRZ3SdADxhp7AvGLLy_OTd_wZ7VgfCM0YOJ9GdWyXZMKztUoGH6C8M_nRf-Dti6qXKtc2Kf_Ye_qgPcXXu7kD__sX3sR5o," target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Resort</a> | <a href="http://ng.ovstravel.com/ol/h0FQdMbOdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymWZNJ7yHlOgKUQxJP2O_Xy/jE9QdczLKllNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9O6Ons2achP90-Hdgs68u2Ecpta0jdpIuo0LYD3-lp9mrFK4tE-Tgy6Sx5apyKV1m29Z1PS2AeQroScnOKHlS4waFhTB-MDZ-fT1fBO0rgC-MuSYIIr1bF3HjwW8iyX9626lU27bxtXLDMCm6a3Wu8k-mwBufPY4Jn1qmvsYM0Dr8BCC-rcJXZGSAL9CSvRm-eZ_bqVUHbdN8afg-Db6m7u2rlPVriSryPGmV_teVGB0-fr1bktmYib6GmIy8pEHxnURDin9TFxRvvBLdL6K_IXciyr6izOy4sqm1klta_FY2DjBLlArnEdgftErEDdiT-nK0SX-c1MS3ozb0WWG3" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Cruise</a> | <a href="http://ng.ovstravel.com/ol/h0FQccTNdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymXbdVwzXtOgKUQxJP2O_Xy/jE5ZcsfOKFlNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9O6Ons2achP90-Hdgs68u2Ecpta0jdpIuo0LYD3-lp9mrFK4tE-Tgy6Sx5apyKV1m29Z1PS2AeQroScnOKHlQ-AHKlzgoajZrKzJfG9Anlk3X6C0PJrpZH2a1lTl4ym4s0JdQ2tSq6X7BPC26bH_zqgSU3wCrdK82522-rs8L0AmHYy7ays5CcGPsH6HRk0GmVIT-mG4BesRlesgkDaWGmd_q6tsarQzVDGeQwvGDUwR0Ba8GtYGlqLS0vfyTo2H-gB5vtQRBfw5vtTn5T-6KKBcBp6aBru-515zo2WRO73w2Kg0ChW7JCJ4ho17GOfa61VG5TiOj2pu4jRTX" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Air</a> | <a href="http://ng.ovstravel.com/ol/h0FRdcfNdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymTZNZ3xXhOgKUQxJP2O_Xy/jEpQccDGK1lNoVcspLOONb6jmDrWbJmruqh0Bvn019g_y0xtPO_ANQ7oh-xFE80iZO6bXAUFGpRkxBpZGeGBdY9O6bNcBlHpVT7ygqTIUIRKLJNF7vI2rf70jlMknZuDn0yXB04DRU5lYFvPMe5w0Gi3Y9YuVBe47nTKaKkXuTEksK0v47H7L56AzlKB1GKL_WKAC15r9tWoyXOJOKFGvN83mFIyuHFxU-_Q6RzG-JshrycpuPQvuxZq565KEJFi9TusTCzJ693-f8F6GoamwfrCjaksVyoR3qkrTEHVe0HqFq_Vcy083yGIqWMSFyt6FzRMDMURuBm3kC5XVOEMSwiV" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Tour</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->
<table width="135" border="0" cellspacing="0" cellpadding="0" style="width:135px;" class="em_wrapper" align="right">
<tbody>
<tr>
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper">
<tbody>
<tr>
<td height="40" style="height:40px;" class="em_h25">
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper">
<tbody>
<tr>
<td valign="top" align="center" style="border-collapse: collapse; mso-line-height-rule: exactly;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px;" class="em_wrapper">
<tbody>
<tr>
<td width="27" style="width:27px;" class="em_hide">
</td>
<td align="right" valign="top" class="em_defaultlink em_center" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:'Helvetica', Arial, sans-serif;font-size:12px;line-height:18px;color:#303030;font-weight:bold;">
<a href="http://ng.ovstravel.com/ol/h0FRd8TMdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpyqXY9dzzn5OgKUQxJP2O_Xy/j05XcMTNLVlNoVcspLPfYfi8yW6GOcn46uc7Sqa2ipR4mh0mKaqMbBi0zpAESsl0JrzKWkRTRsQ6hk8NTrvTP9UXobMeXxjpHniq0_qcLNkXKvIwiJk6uevwjTtap9aWrUjDAhIgdFR1SDONQooD1G_KBKUCfiKht2qWO7gsijoctp4r46aTUZS8zVSz4xTnuxuBEltU5fu87lq9HtRyw-ELulB20GB-d_XexifP6LN3rxYS4bREmU13xs0mJfFcxkalWxPM4N3iFvFLD7-93czAuMJ_RTgnn7QqbWv7FnG6PafNdAF78x6ktw,," style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">1-866-691-5107</a>
</td>
</tr>
<tr>
<td width="27" style="width:27px;" class="em_hide">
</td>
<td align="right" valign="top" class="em_defaultlink_und em_center" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:'Helvetica', Arial, sans-serif;font-size:12px;line-height:18px;color:#303030;">
<a href="http://ng.ovstravel.com/ol/h0FTcMzMdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpyqYYN5yy3pOgKUQxJP2O_Xy/j0FUecXIKVlNoVcspLOONb6jmDrWbJmruqh0Bvn019g_y0xtPO_ANQ7tjd1UGpsmdqbBDAcdEZVz_wVcR7LAKtURq6IETUC_SGDxgazfUIRKLOYrjZE1qvj2nm0OvuKWnVeRJ3srWV1ZdC2oSu9yqQnSEbECeU6WrXX-OpExiBsrqogw7r6MdYWT6GXw1BPo4xOEHVBHw8Wd607xFMFckdIQ7XkUsFozVcXk6x_IkLoVgDJjxvgmlSxeovlKFO89zBa-cSCx_tbhaqVkTficoubN6tcPfwoGj5MrUVH7IGmeWoe7cyB82TI," target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: underline; text-decoration:underline;color:#303030;">My Account</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Here's a few shots of what I'm seeing with this code in the browser:
desktop
mobile
To get this into shape I needed to move the logo <td> into the same table with the rest of the content and then adjust the width of the table to include the logo (from 490px to 560px). I also added the "em_wrapper" class to the table, it looks like that's what's helping it stack up on mobile.
Let me know if you've got any questions here or if this is working out on your end as well? If not, feel free to post an updated preview link once you've got these changes in play and I'd be happy to see if there's anything else we can figure out together here.
Thanks, Dave
... View more
08-03-2021
03:41 AM
Hey LK,
It's hard to tell what's going on in the code b/c it looks like most things are using a variable. It might be helpful to try and get a "rendered version" of the code by opening the email in the editor and clicking the "preview" button to bring up the rendered view where the variables are translated into actual code (text/images/etc). You can grab that code in the web browser's inspector by finding the module in your email and right clicking on it then doing an "inspect element" (usually close to the bottom of the pop-up options menu). You should then be able to see similar code to what you posted here minus all the variables. It might be more helpful to get an exact solution if you were to copy/paste the exact same code from the rendered view into this post to take a little bit of the mystery out of it.
Here's a general idea of what I think you're gonna want to do to get this worked out:
1. Make it so that the USAA Perks logo (vertical version) aligns vertically with the Member Travel Privileges logo >> This usually has to do with the "valign" (vertical-align) element that's set on the table/td which holds the image. It looks like most of your tables use valign="top" which is what pushes them up to the top of the cell. Changing this to valign="middle" should help align them to the middle of the cell instead. I also like to include an inline style for this --> style="vertical-align: middle;" to be sure, b/c email loves redundancies. There may be a few places to set this, I'd start with the td/table that's closest to your image (parent element) and change that one and then work your way up the document to the next parent element and set that to align middle if it's still not doing what you want.
2. Make the logo larger (around 150 x 86)
>> It looks like you've got a few table cells (td) set with a specific width in the table and you'll need to recalculate the widths of each element so that they fit nicely into the 560px (total) module [600px minus 20px padding left and right = 560px]. Right now, it looks like the 1st image in the module is set to 70px in a few places. You'll want to find the "70px" and change that value to 150px (also don't forget to update the height [40px] to your new height [86px]). Initially this'll break the table b/c you're expanding one of the cells to 150px where it used to be 70px which basically means you'll need to take away 80px of space from the other cells in the module (the middle one w/ the horizontal logo and the far right one w/ the stacked text). In the end, all the cells in the module should total 560px to make sure it fits inside the module container nicely.
Let me know if you've got any questions or run into anything weird. If you're able to supply the rendered code (w/o variables) I might be able to help a bit more by loading up the code and having a play on my end.
Thanks,
Dave
... View more
08-02-2021
07:24 AM
Unfortunately, I think this is a short-coming of the .mktoImg element in the email editor. Because of how it's setup, clearing the content does not also remove the container for the image and the .mktoImg component is using attributes in the HTML to "inject" the different pieces (like URL) that you'd want to easily edit.
For me, I prefer not to use the .mktoImg element at all b/c of this (and other) limitations. I prefer to use the .mktoText element instead and use the Rich Text Editor > Insert/Edit image tool which does basically the same thing.
To get the entire .mktoImg element to disappear you'll actually need to create something like a toggle where you can comment out the container all together after you clear the content. This is a two-step process -- 1) clear content 2) hide the element but this approach requires some add'l setup at the template level (an additional control to "hide" the element).
Another option would be to clone the module in the template and just outright remove the image part of it so that you've got two modules total - one with and one without the image - and then just drag-n-drop the right one into your canvas. This means you've got to migrate any content from the existing modules (headlines, links, paragraphs, etc) into the new module, but at least it won't show broken images when you clear it. Another thing to consider about this is the add'l spacing around the image (top/bottom) that also needs to be addressed when you remove the image so that there's not a wide gap between the button (above) and the headline (below).
... View more
08-02-2021
03:06 AM
Hey Sheila, sorry to keep you waiting on this.
Here's a few more styles you can add to the form to hide the label for the hidden checkbox field (country-based visibility rules) and remove the margin on the bottom of the field to shore up the space above the button.
/* hide field label for this field */
label#LblmktoOptIn {display: none;}
/* remove margin-bottom from checkbox list */
#band3Form form.mktoForm .mktoLogicalField.mktoCheckboxList {
margin-bottom: 0px;
}
Let me know if this works to solve the spacing issue on your end?
Thanks, Dave
... View more
07-30-2021
10:50 AM
Nice work there, looks great so far!
Removing that space is definitely possible - let me take a look at the page again and work out a solution, I'll post back here a bit later today with an update.
... View more
07-30-2021
05:36 AM
2 Likes
Hey Adele,
You might try using the "checkboxes" field type instead of the "checkbox" field type on your form. The checkboxes field type allows you to enter 2 bits of information: 1) Display Value -- this is the text to the right of the input
2) Stored Value -- this is the value that gets stored on the record
Once you setup a new checkboxes field, you can select the "Values" link in the right column of the editor to adjust both what the user sees and what gets sent back to the server. This sounds like you a situation where you'd want to add:
1) Please tick the box if you don't want to receive news, updates or product information from MHR International to the Display Value 2) No to the Stored Value
I just posted a walk-thru for changing a "checkbox" field to a "checkboxes" field on another post here: https://nation.marketo.com/t5/product-discussions/make-label-wrap-with-two-column-checkboxes/td-p/315230 and there's some screenshots there of where/how to update the Display Value and the Stored Value for a "checkboxes" field.
Let me know if you've got any questions on how this gets setup, I'd be happy to help -- or if you were able to get this working for anyone else who might run into a similar issue in the future.
Thanks, Dave
... View more
07-30-2021
05:26 AM
Hey Sheila, thanks again for setting up a new thread here. It looks like you've already gotten some feedback about what's causing the issue here so I've put together some CSS to help you solve the issue on your forms. I've attached a screenshot of what Im seeing on my end as well as a bit of code that you can drop into the end of your Custom CSS stylesheet on the form itself.
This spacing issue is actually something I see quite often when there's a set of custom CSS on a form. Many times, the spacing between the form fields is applied on the row (.mktoFormRow) or columns (.mktoFormCol) maybe b/c those are the most obvious choices when you're looking at the code. This approach however adds height to hidden fields (as you've seen here) b/c those are contained in both a row and a column before they are populated (or not) on the page.
The solution involves moving the spacing from the rows (margin-top: 24px) to the field wrappers (.mktoFieldWrap) b/c those will not be present on hidden fields until the field populates on the page (for the case of visibility rules). In this example, I've split the margin-top of 24px into a margin-top and margin-bottom of 12px to go around every field.
The other piece that was giving me some issues was the HTML text at the top of your fieldset that you were using for a label. I'd recommend moving that text (just text is ok, no html/css needed) into the "legend" (aka fieldset label) to better align that with the native fieldset element. There's a funky offset (margin-top -60px) on the checkbox field inside the fieldset to compensate for the "not so hidden legend element" so I've also adjusted that in the CSS below to help get this back to a "normal" state.
Here's a look at what Im seeing on my end in Chrome on a PC:
add spacing to "mktoFieldWrap" rather than "mktoRow" or "mktoCol"
Here's the CSS I used in the inspector to create the preview here:
/* remove margin from top of all form rows */
#band3Form .mktoFormRow {
margin-top: 0px !important;
}
/* apply similar margin to top and bottom of fieldwraps instead */
#band3Form form.mktoForm > .mktoFormRow .mktoFieldWrap {
margin-top:12px !important;
margin-bottom:12px !important;
}
/* remove margin from top of button */
#band3Form .mktoButtonRow {
margin-top: 0px !important;
}
/* remove -60px margin top on checkboxes field inside a fieldset */
#band3Form form.mktoForm fieldset .mktoLogicalField.mktoCheckboxList {
margin: 0px 0 24px 0;
}
/* adjust fieldset legend to match labels */
#band3Form .mktoForm fieldset legend {
width: auto !important;
display: inline-block !important;
margin:0px !important;
padding: 0 15px;
color: #fff !important;
font-size: 18px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}
Let me know if this just snaps right in for you or if you run into any issues with getting to a similar display.
Thanks again, and happy Friday 🙂
-Dave
... View more
07-29-2021
11:23 AM
see also: https://nation.marketo.com/t5/product-discussions/set-default-values-directly-on-embedded-form/td-p/315418
This posted to the community just today and might be an example of the type of thing(s) you'd need to consider with embedded forms (in general) and within the context of an Unbounce application.
... View more
07-29-2021
09:38 AM
1 Like
I see this as basically one of two conditions:
1) Use any external CMS to build Landing Pages: PRO: LPs might be a little easier to "build" using a different editor than Marketo's (which is at least a generation behind most "modern" CMS systems like Unbounce or LeadPages) CONS: they'll require you to build and manage an integration at some point.
2) Use Marketo to build Landing Pages:
PROS: You won't need to create custom integrations or manage syncs between two systems.
CONS: The editor is a bit less user-friendly (depending of course on how flexible your template system is).
I'll mention that I'm of the mind that anything you could do in Unbounce (or anywhere on the web), you can do in Marketo as far as the end-result of any landing page (look, feel, functionality). If it were a vote/contest, I'd vote for Marketo LPs for me, but there's a different "right" answer for every situation.
The trade-off as I see it is that using an external CMS lowers the barrier to entry for creating and maintaining new layouts and changes to your Landing Pages (so they say, I'm looking at you Wordpress) -- at the cost of needing to integrate the two systems, which generally requires more dev work to build, maintain and troubleshoot if/when trouble arises. If you've got an expert in house and they need something more to do with their time, this tradeoff might not really matter that much -- and assuming everything works as expected.
Personally, I think less is more here, and if you can get away with fewer integration the better off you are in terms of data fidelity and being able to trust that what you're reporting on is "native data" rather than a skewed version b/c of some sync hiccup(s).
Another thing I might think about in this consideration is the rising importance of systems security -- the more parts you have, generally the more risk you'll have. Depending on how you plan to use Marketo (in-house vs. outsourced) it might be better or worse to use Marketo LPs. I'd think if you've got another team building pages on your behalf, it might be easier (less red tape) to have them work in an external system like Unbounce or LeadPages and just deal with the technical hurdles of integrating the two. If you've got folks in-house that will be using Marketo on the daily, I'd think it was easier (one system, not two logins) and more secure to go the Marketo LP route. Of course, there's exceptions to this based on your situation and security setup, but it might be something worth considering if you're laying a path for the long-term.
... View more
07-29-2021
09:01 AM
Hey Sheila,
I had a quick look at the issue you mentioned and this is something much different than the checkboxes solution we've been working on here. Would you mind creating a new post to address this issue more specifically? This'll help for anyone else in the community who might run into the same issue and doing a quick search for a solution. I think an ideal Subject might be something like "remove additional spacing from hidden fields on a form" or something like that.
For the other piece, the EasyEditor GUI is a little extension I built for the [FLEX] LP Framework that applies a "roadmap" overlay into the Marketo editor experience to make it a bit easier to navigate around the page. Im sure you've noticed that it's difficult to find/select content areas in the editor when they are empty and this is just a way of being able to "see" all the different places you can edit on a page. It adds the little blue labels to each section, editable text, form and snippet container to make it a little easier on the end-user to find stuff on the page.
Here's a look at the same blank layout -- on the left is the native Marketo LP editor experience and on the right is the same experience with the EasyEditor GUI overlay turned on.
EasyEditorGUI = OFF EasyEditor GUI = ON
What you saw in the screenshot of the browser was just about the same code (script) but saved as a snippet in the Chrome "Source" tab. Here's a link to more info about the Chrome snippets, this is the only one I use, but it's a really neat feature: https://developer.chrome.com/docs/devtools/javascript/snippets/ -- basically this just stores some code in the browser which you can "run" to execute in your browser tab. I use this to apply the GUI to the "approved" version of pages (outside the editor) to help when troubleshooting things, but it really only works in the context of the framework.
In any case -- I'll dig back into the form styling stuff to see if I can help figure out how to hide the add'l space from the hidden rows there. Feel free to tag me if you're able to put up a new thread and I'll post a solution there as soon as I've got something solid.
Thanks again,
Dave
... View more
07-28-2021
04:05 AM
1 Like
Hey Shelia, you're not alone with thinking that you couldn't put HTML into the Display Value for the checkboxes field, it comes up a lot in my experience. Thanks for getting the field type switched over, nice work there!
I was able to go in this morning and add a few more lines of CSS to the inspector here to straighten out the 2-column vs 1-column checkbox situation. The way I normally handle this situation where you want to style similar fields using two different sets of styles is to include one inside a fieldset and another outside a fieldset (like you've already got setup here conveniently). In this way, you can write a set of rules for "all checkboxes" (or whatever field type you're looking to style) and another rule for "all checkboxes within a fieldset parent container". This allows us to do 2-columns inside the fieldset and 1-column outside the fieldset.
I've done my best to comment the code here, but let me know if you've got any questions on any piece of it.
Basically, I needed to set some rules for the "all checkboxes" category and remove some margin, make it 100% width and I took the liberty to adjust the line-spacing so it was a little tighter for the smaller text (line 1-6).
For the checkboxes inside a fieldset, we'll then need to re-apply the margin and line-height that were already on the checkboxes (that got removed by the "all checkboxes" CSS) -- this is the second "group" of line in the CSS (line 7-11)
Finally, there's a really weird thing on the forms2.css stylesheet that adds padding to EVERY element on the form for displays up to 480px which is written poorly (desktop-first instead of mobile-first) and we needed to remove the add'l padding that adds to your forms to make it look better on mobile. (line 12-15).
2 checkbox style set: 1) all checkboxes, and 2) checkboxes inside a fieldset
/* for checkboxes that are NOT in a fieldset (all checkboxes) */
#band3Form .mktoCheckboxList label {
width:100% !important; /* resize checkboxes label */
margin-left: 0; /* remove margin */
line-height:1; /* adjust line-height */
}
/* for checkboxes that ARE in a fieldset */
#band3Form fieldset .mktoCheckboxList label {
margin-left:1.5em; /* add the margin back in */
line-height:1.2; /* re-adjust the line-height */
}
/* all element within a checkbox label parent element */
#band3Form .mktoCheckboxList label * {
padding:0px; /* override Marketo mobile CSS */
}
You should be able to pop this code into the end of your form's Custom CSS -- same place you put the other stuff -- and see similar results to the screenshot above.
Again, let me know if you've got any questions, Im glad I was able to help out here and even better to hear that you're learning along the way - that made my morning 🙂
... View more
07-27-2021
03:43 AM
This looks like it could be fixed by updating the form field from a "checkbox" field type to a "checkboxes" field type.
The long-and-short of it is that the "checkbox" field type does not have a label beside the field, whereas a "checkboxes" field type does have a label beside the field.
In this case, it looks like you've got a Rich Text element that's pretending to be a "label" ( I agree to receive email ...) and the actual label of the field set to a different value (EMAIL OPT-IN). What you'll want to do is switch this field over to use the checkboxes field type (even though there's only one checkbox, what we're after is the built-in label-to-the-right-of-the-input). Once you change the field type, you'll want to remove the actual label text (EMAIL OPT-IN) from the field and then find the Values link in the right column of the editor (see attached).
TOP: checkbox field type || BOTTOM: checkboxes field type
The idea here is to move what you've got setup in the Rich Text field into the "Values" menu to display it to the right of the input as shown in the highlighted text above.
To move this stuff over, click into your Rich Text "label" and then click the HTML icon on the toolbar to grab all the code in that field. Next, go back to your updated "checkboxes" field and click into the Values menu (where it says "Edit(1)" in the screenshot). This will pull up a dialog box with a link in the bottom left corner that should say "Advanced Editor" -- click that to bring up the screen below:
Advanced Editor View: values to the left of the pipe are displayed to the user | values to the right of the pipe are stored
In this screen, I've clicked the "Advanced Editor" and now the link changes to show the "Simple Editor" link instead but it'll look different when you load the dialog menu each time.
To get the code you copied from your Rich Text section into the actual label for this field, you'll want to replace any text on the left side of the pipe (likely there won't be any b/c you just changed the field type) with the HTML you copied to the clipboard. This next bit is important... this view of the Editor interprets a line break as a new field so you'll want to make sure that any code you paste in here does not have any line breaks (is minified) so that it reads as a single "label". To the right of all that code you just pasted, you'll want to make sure you've got 1) the pipe "|" to separate the display value (left) from the stored value (right), as well as 2) the actual stored value ('yes' in the examples).
Here's what I think that'll look like once you've got the pieces put together in the Values > Advanced Editor menu.
<small>I agree to receive email communications from SEMI. You can unsubscribe at any time by visiting the <a href="https://discover.semi.org/subscription-management.html" target="_blank" id="">subscription center</a>. All data is protected and secured as outlined in our <a href="https://www.semi.org/en/privacy-policy" target="_blank" id="">privacy policy</a>.</small> | yes
Finally, if you'd like to keep the EMAIL OPT-IN text above the field, you can add that into the Rich Text element in place of the other stuff you had in there and just set that atop your new checkboxes field type. We'll probably need to take another look at the checkboxes CSS to get it to display differently than the checkboxes field with 2-columns but I'd be happy to help tackle that part once you've got the field type switched over -- it'll be MUCH easier to work with the CSS at that point.
Let me know if you run into anything trying to set this up or have any questions about what's going on here. Once you've got the form field type changed over, shoot me an updated link here and I'll hop in to see if we can iron out any issues with the CSS from there.
Thanks,
Dave
... View more
07-23-2021
08:48 AM
Hey Sheila,
It looks like the way this is coded it's kind of missing the "fluid" styles that it needs to take the shape of it's container as you resize from mobile to tablet and then desktop.
I've fiddled w/ some CSS in the inspector here which you could add to your form in the "Custom CSS" dialog box on pg2 of the form editor. This should help to override a few of the issues in the theme stylesheet as well as address a few things that come from Marketo that make this not-so-responsive in the first place.
Here's a look at what Im seeing on my end w/ this CSS applied:
desktop view (1200+ px)
Above: desktop view has a total of 4 grid columns: 20px 1fr 20px 1fr
tablet view (768px - 1200px)
Above: Tablet view also has 4 grid columns: 20px 1fr 20px 1fr
mobile view (0px - 768px)
Above: mobile view has 2 grid columns: 20px 1fr
Here's a copy of the CSS I've used in the browser to get these results:
#band3Form form.mktoForm .mktoLogicalField.mktoCheckboxList {
width: 100% !important; /* theme css override */
column-count: 1; /* theme css override */
-webkit-column-count: 1; /* theme css override */
-moz-column-count: 1; /* theme css override */
margin: 0px; /* theme css override */
column-gap: 0px; /* theme css override */
white-space: normal; /* theme css override */
padding: 0px; /* theme css override */
display:grid; /* display checkboxes as a grid */
grid-template-columns:20px 1fr; /* 2-column grid, 20px | 1fraction */
}
#band3Form fieldset label.mktoLabel {
display: none; /* hide the checkboxes (parent) field label */
}
#band3Form form.mktoForm fieldset {
padding: 0px !important; /* marketo css override */
width: 100% !important; /* marketo css override */
margin: 0px !important; /* marketo css override */
}
#band3Form form.mktoForm fieldset .mktoLogicalField.mktoCheckboxList label {
width: auto !important; /* theme css override */
}
@media screen and (min-width:768px) {
#band3Form form.mktoForm .mktoLogicalField.mktoCheckboxList {
grid-template-columns:20px 1fr 20px 1fr; /* 4-columns 20px | 1fraction | 20px 1fraction */
}
}
Let me know if you've got any questions about why what you had in there wasn't working or how any of this is working differently than it was before.
Thanks, Dave
... View more
07-20-2021
11:40 AM
Check out: https://experienceleague.adobe.com/docs/marketo/using/product-docs/email-marketing/general/email-editor-2/email-template-syntax.html?lang=en#modules
Optional attributes
mktoActive: Determines whether this module appears in the list of modules within the email editor. Defaults to true. If false, the module cannot be added by an end user to an email. mktoAddByDefault: Determines whether this module will be in the canvas of a new email that uses this template upon creation. Defaults to true (if mktoActive is false, this value is ignored).
These attributes go on the module itself and allow you to either include a module on every new asset made with the template (or not) as well as to show the module in the module panel (or not)
<tr class="mktoModule" mktoActive="true" mktoAddByDefault="false">
...
</tr>
*Note: these are the default settings, so you'd get the same result with this setup as if you omitted these all together
I'll usually only set the mktoAddByDefault to "true" for things that I'd want to be on every email I ever created, no matter what. This usually ends up being the header and footer sections.
For the rest of the modules, you'll usually want those to be "added as needed" using the drag-n-drop editor (b/c you can produce lots of layouts using the "modular" nature of the email template modules) so you don't need to set either of these properties.
Compared to email 1.0, most of the 2.0 templates that I've seen don't actually include the modules in the layout, they're almost always added in after the initial email is created. There's not really an ON/OFF switch for modules like there used to be before you could drag-n-drop modules into your layout b/c you can just add and delete what's needed now so it's a bit more flexible of a system.
As a bottom line, you'll want to eventually create a "starting point" for each of your layouts (use-cases) and then clone that to create a version that's identical in terms of layout and content but has the different branding applied to it (eg. update button colors, load a different logo into the page, etc).
... View more
07-20-2021
07:11 AM
1 Like
Hey Felicia,
For "enterprise" (or multi-brand) solutions like this, I'll normally use different stylesheets for the Landing Pages and swap those out using a variable in the LP Editor so that you could basically toggle each brand on/off as needed (and load a different set of fonts, colors, etc). For the headers and footers (logos and copyright) I'll normally set those up as snippets so they're easy to change out. In terms of managing the different use-cases, it sounds like you're already on the right track there. The best thing I've found for this situation is to create a folder(s) of "Master Layouts" for each of your brands and then for each of your use-cases inside of that (eg. BrandA > Webinar Gated, Webinar Ungated ... | BrandB > Webinar Gated, Webinar Ungated ...) I'll set these up in Design Studio (or even better, a program template for "Webinars" in your Marketing Activities folder) so that they're available to clone from a pre-set starting point (pre-branded w/ the layout configured) in much the same way that you're doing with your quick-start examples.
The same goes for Email in terms of having a set of starter layouts to clone new pages from (aka quick-starts), but with Email, the rebranding isn't typically as flexible b/c you can't count on something like a stylesheet swap to handle all the changes you'd need to make from brand-to-brand. For Email, it might be best to choose one of your starting points (eg Webinar Invite) and get the layout/content all setup for any one of the brands on that one then clone it into a folder called "Starting Layouts" (or something like that) in Design Studio so you've got a clean folder with ONLY "Starting Layouts" that you can use into the future. Then clone that into the "BrandB" folder and rebrand it there, repeating for each other brand. Then do the same for each layout you'd want to use as a Starter (Invite, Confirm, FollowUp, Reminder ...) This'll help work around all the hunt-and-find from a previous campaign AND (my favorite part...) it'll also help to prevent the "Frankenstein" condition where you make a few one-off changes to the email and then those just kind of carry forward each time you clone that one. Using a "Starting Layout" and cloning it (rather than starting a new email using the template) will keep the starting point consistent and then you can safely go off-roading into one-off-wonderland on any cloned version of the Starter Layout without giving your future self a headache.
The reason you might be getting that error you mentioned is that there's a variable that's assigned somewhere in your modules that is not declared in the head -- either the <meta class="mktoString" id="VariableName" ...> variable got removed in the <head> or something about the ${VariableName} was changed in the code so that it doesn't match the id="" of the metatag any more.
In terms of editing Marketo templates outside of Marketo - anything is possible here, at the end of the day it's just code and you could use a basic text program (Notepad for example) if you had to. The trickier part is getting familiar with the Marketo syntax and understanding how to use that "on behalf of the end-user" (marketer) so that things like this are really easy to manage and suit your business needs. The piece that makes the templates difficult to edit outside of Marketo is that Marketo is translating the variables and tokens and other "Marketo stuff" like that when the code is rendered from within your instance but those same bits of code don't otherwise mean anything to anybody so without the translator in the middle (Marketo) it ends up looking like a hot mess. When I do want to try and troubleshoot or play with a new module layout/design outside of Marketo, sometimes it's helpful to preview the page/email and copy the rendered code out of the console tools in your browser's inspector b/c once the code is rendered it'll have all the variables and other Marketo magic removed. This creates a "clean" version of the code without the variables which makes it easy to tool around with, but then you cannot put the updated "clean" code back into Marketo b/c it won't have the variables -- so there's a bit of legwork to do once you know the solution in fitting it into the "Marketo-version" in your template or whatever that's got all the variables. NOTE: In the email editor there is an "Edit Code" feature. I'd stay away from that all-together, it's a little deceiving and also easy to miss that any changes you make there will break your email away from the template it's using which could also be what's leading to the errors your seeing with the variable "freetextcolor".
Let me know if you've got any questions on the setup for multiple brands piece, and I agree with Phillip that it's not "easy" to edit Marketo code (inside or outside Marketo) and I think you'd probably end up way ahead by finding a team that's really well versed with Marketo (specifically) to produce something like this on your behalf.
Thanks,
Dave
... View more
07-19-2021
05:08 AM
1 Like
I ran into an issue recently with the LP editor that I was able to fix by changing the property of my inline CSS variables but wanted to ask about to see if anyone else has run into this or if this might be a bug w/ the editor that's fixable?
In my example I had some HTML that looked something like this:
<head>
<style> --fooBar {red;}</style>
</head>
<body>
<div style="background-color: --fooBar"> some text in a red box</div>
</body>
Once I clicked the "SAVE" button to add this HTML to the editable area it gets translated to:
<head>
<style> --fooBar {red;}</style>
</head>
<body>
<div style="background-color: --foobar"> some text in a red box</div>
</body>
^^ see: --foobar is lower-cased rather than camel-cased in the <div>
To work around this, I just changed the CSS in the head to use "foobar" instead of "fooBar". The only place I noticed this issue was when I was adding the CSS variables inline (to the style="" attribute) and also within an editable area (so maybe something with the TinyMCE piece?). The other variables (not in an editable area) seemed to work just fine and not translate into the lower-cased versions of themselves.
It makes sense that "Background-color: red" would be changed to "background-color: red" b/c properties for CSS elements are always lower cased, but this creates at least one issue when you're using camel-cased CSS variables inline within an editable area.
Anyone got any ideas for what might be causing this? Is this just something to "deal with" and code differently because of? Would it be a heavy lift (or too much to ask) for support to address something like this within the system? I'd appreciate any ideas/thoughts you've got on this topic.
Thanks, Dave
... View more
07-19-2021
04:42 AM
I agree w/ Phillip, add one more vote for: "haven't run into any issue yet".
To test something like this out, you might want to setup a program folder and fill it full of tokens (maybe just something like {{my.testNumber1}}, {{my.testNumber2}} ...) and then drag in any ol' module in your email (something simple like a paragraph should do) and fill it up with token-after-token until you either hit the number you're looking for or something way more than you think you'll need. In your program you'd of course want to assign a value to the tokens, maybe something simple like {{my.testNumber1}} = 1 and {{my.testNumber2}} = 2 so that you could see the number counting up if it was working (1,2,3,4,5...500).
... View more
07-16-2021
11:51 AM
1 Like
Also, FWIW -- I don't think there's any kind of limitation about what you can do "in email" and what you can "in Marketo in an email" . The "Marketo" part of it is just an additional syntax to build the editable areas and such, but anything that would work "in email" (anywhere) should be able to be shipped from Marketo (as far as I've seen anyway).
... View more
07-16-2021
11:49 AM
4 Likes
I'll be the first to raise my hand here and say this isn't something I would consider doing until there are some major changes in the email inbox universe. I think it's great to be pushing at the very edges of the technology, but there are some substantial barriers to something like this working for "most inboxes today". We're certainly moving in that direction but most of the stuff that's out there now is REALLY dependent and too often that gets kind of "covered up" by all the excitement about "doing the thing" in an email.
Here's a clip from Litmus about the market support for html5 and css3 which, in my humble opinion, are still not "safe" (50%) for the mainstream channels of email:
https://www.litmus.com/blog/a-bulletproof-guide-to-using-html5-and-css3-in-email/
While support certainly isn’t universal, many of the leading email clients support HTML5 and CSS3. In fact, about 50% of the total market and 3 out of the top 5 email clients support them. Support may be even bigger for your particular audience.
... as far as I know, baseball batting averages (.333) are about the only thing that would be remarkable if it worked 50% of the time -- that's the stuff of coin flips.
If you've got a very specific audience in mind and you are sure they all use an inbox which supports html5 and css3 this might be something worth looking at -- but even then, you're dealing with a fraction of the functionality that you'd get by making a single compelling CTA and sending the user to a website. Demographics might also play a role in this depending on how the trends in email continue (or don't) to play out as user groups change their behaviors into the future -- maybe it'll make more sense for one group (us old timers who still remember email marketing) and maybe less for another (the new kids on the block).
From my POV, the more important piece to consider here is not "what happens when it works" (folks are delighted by the novel experience and clickity-click away) but rather "what happens when it doesn't". If you've ever gotten a really poorly delivered invite to an event or wanted to click a link but it didn't work you'll realize that the cost of thing not working is often more in terms of brand reputation and trust than the cost of delivering the bleeding edge experience in the inbox.
Another important consideration is that inbox scanners are getting better and better and "reading" email code and something like this (from a codebase perspective) is sure to sound the alarms to be flagged as "clearly a marketing email" (think Gmail's Promotions tab, but everywhere) because of the variety of techniques you'd need to use to achieve something like this (assuming it works in their inbox in the first place).
Overall, I really like the ideas that are laid out in the these articles, they're very forward-thinking and an email microsite sounds like it'd be a great addition to the email toolbox in the right situation. If I had to put a dollar down on it though, I'd bet this wouldn't be a thing (more than a yearly fad) anytime within the next 3-4 years -- and I'd pay a dollar to be wrong about it! 🙂
... View more
07-16-2021
05:46 AM
1 Like
This is possible, but not widely supported enough to warrant use when sending to a 'general audience'. For something like this to work you'd really need to know which ESP (inboxes) your audience uses and cater the css to those clients. There are a few examples of things like this out there on the web, but they're more "bells and whistles" and break more than they don't in the modern environment.
The two ways of going about this for webpages are generally:
1) use a script to create an "accordion" function when you click on something, but scripts will not work (for good reason) in your email inbox for security reasons
2) use CSS to create the accordion. This is more technical to setup and requires bits of css that aren't generally supported in email inboxes (yet). I'm hopeful that someday this'll be a "generally supported" thing but for now it's still a bit "fashion-forward" and won't display for a good chunk of the inboxes out there b/c of the limitations they place on css.
Keep in mind that something like will likely work within the context of the Marketo editor b/c it's web-based (it's a website) rather than "inbox-based" so you've got a more robust set of supported CSS in the editor than you do once the email actually hits your inbox -- don't be fooled by folks promising that this'll work just b/c it's working in Marketo and if you do find something ask for email render test results to ensure that it'll work for the inboxes you're targeting for your specific audience.
Thanks, Dave
... View more
07-14-2021
07:47 AM
Marketo hosts a bunch of Guided LP templates that are free and can be downloaded and added into your instance here: https://experienceleague.adobe.com/docs/marketo/using/product-docs/demand-generation/landing-pages/landing-page-templates/guided-landing-page-template-list.html
If you're just looking for a design that you can work with going the free route might be a decent choice but keep in mind you get what you pay for so they're very "single-use" and often not very flexible solutions for the long-term -- I'd stay away from anything like this (single-use, not flexible or adapted to your brand) that you've got to pay for b/c it just becomes a cost center in time.
If you've got a more specific design in mind, another route to go with something like this is to look at hiring an agency (and there's a bunch out there that do great work) to produce something more specifically related to your brand and use-case examples. This usually costs more (and again you often get what you pay for here) but generally it sounds like this leads to better results in the long-run. If you are going the agency route, I'd try and seek out an agency that's got some Marketo chops b/c there's a significant difference between just making web pages and using the Marketo template syntax to create an editable experience for your team that actually makes it easier (and dare I say -- fun!) to work in Marketo. Here's a great list of things to consider if you're looking at the agency route: https://nation.marketo.com/t5/champion-program-blogs/how-i-learned-to-stop-worrying-and-hire-a-great-marketo/ba-p/248075
Thanks,
Dave
... View more
07-13-2021
01:50 PM
Hey Jodi-
This has to do with using a background image rather than a foreground image. The job of the background image is usually to try and cover a section's background -- kinda like wallpaper on a wall. Generally it's a bad idea to use images that contain a "subject" (people, products, etc) and/or "words as part of the image" b/c there's a good chance that they'll get cropped off at the top/bottom or left/right depending upon the size of the browser (PC, tablet, mobile, etc) that you're viewing them on.
In this situation, the background image is sized so that it "covers" the entire area at the top of the page (which is set to have a min-height of 410px). This also means that anything that doesn't exactly fit the ratio the agency gave you isn't going to display as expected on a different device that doesn't match those dimensions. In short - it's a poor choice for a way to go about setting up a background image (I can see the background green color show thru at some viewport ratios) as well as an issue with the image (in terms of having a subject and text baked into the image). Baking text into an image like this is generally avoided b/c there's a lot that you lose by not having the "live text" included in the page for a machine to read -- it'd be much better to use just the background image with the computers (maybe even anchor it to the right instead of the center so you'd always see the machines) and then layer the text on top of that using a <h1> tag for your main headline (so computers can better "read" the page; it'll boost your SEO; as well as make it accessible to folks who can't actually see the image there).
The better way to go about this might be to add a "foreground" image into the editable area in your banner and get rid of all the background stuff. A foreground image (just a plain ol' image element) will not get cropped off at the sides b/c it's not set to "cover" the background area of its container.
The issue in your case is that the template is coded in such a way that your banner image would be squeezed into a padded container (in the editable area where the text could go atop the banner) in the middle of that section and look weird b/c it was small, but not b/c it was cropped. From there you'd want to add a little CSS to the page (or better yet to the template) to modify that section for use with a foreground image if that's how you'd prefer to go about it.
It sounds like an ideal path forward here would be to have someone help add a new section to your template that was designed specifically for a use-case like this (eg a "Banner Image" section) where you could just plop in an image that went from edge-to-edge and not have to worry about the background stuff.
Alternately, you could break apart the image into just the clouds + computers and put "live text" atop the background image in the editable area. This would take a little more to setup, but compared to doing 100 laps thru Photoshop to get something to line up that never will, it's well worth the effort in the longrun.
If you can setup a clone of this page and just add the background image as an image element (foreground) into the editable area inside the banner section (where the text would normally go), I can help from there to dial up some quick CSS that you can at least add to this page to this one nailed down for the short-term win.
Here's a look at some HTML you can copy/paste into that editable area to get started:
<!-- banner image -->
<div>
<img src="https://go.procedesoftware.com/rs/065-NGP-662/images/Hero - Hosted Services eBook Brightened 1440x410.png">
</div>
^^ I notice here that you've got spaces in the file name "Hero - Hosted Services eBook Brightened 1440x410.png". It'd be best to remove the spaces or exchange them for a low-dash "Hero-Hosted_Services_eBook_Brightened_1440x410.png" and reload the image with the updated filename back into Marketo. You'll likely see a few weird things w/ spaces in the file name, especially w/ images.
Let me know if you've got any question on any of this - it's a pretty common situation that you're running into here and I think it's just a matter of making sure that the tool you've got works for/with your business process for putting pages together. If/when you're going to go the "subjects + text baked into an image" banner route, you'll definitely NOT want to use a background image since the height/width (proportions) are based on the size of the section rather than the size of the image. When you want to kind of separate it into layer w/ live text and even multiple layers of background images stacked up is where you'd want to use the background image feature.
Thanks, Dave
... View more
07-12-2021
01:33 PM
1 Like
I've added a bit of CSS in the inspector (pictured below) that targets the mobile display (less than 480px) which removes the padding on any elements that are inside of a table in one of the rich text elements on your form. This should work to kind of isolate the header elements you've got there (both the icon and the labels) but not have an impact on the other elements on the form.
Here's a look at the CSS you could try adding onto the end of the Custom CSS sheet (on the form):
@media screen and (max-width:480px) {
form.mktoForm .mktoHtmlText table * {padding:0px !important}
}
Here's what Im seeing on my end when I add this code into the browser:
Remove the padding on mobile for any elements INSIDE a table that's INSIDE a Rich Text form element (.mktoHtmlText)
Let me know if that works out for you or if you've got any questions about what's going on here.
Thanks, Dave
... View more
Public Statistics
| Date Registered | 04-04-2016 05:33 PM |
| Date Last Visited | yesterday |
| Total Messages Posted | 402 |
| Likes Received | 276 |
Likes given to
.png)