SOLVED

Lost Responsive Elements, (Newbie)

Go to solution
Shaun_Emerson1
Level 1

Lost Responsive Elements, (Newbie)

Hi Everyone, Very new to Marketo and I'm currently in the process of learning HTML. Using some HTML I found online and as I was going through and making the elements editable in Marketo I somehow lost the ability to have this be responsive. Any pointers on how to correct this? Apologies if this is a very novice question!

Hi Everyone,

Very new to Marketo and I'm currently in the process of learning HTML. Using some HTML I found online and as I was going through and making the elements editable in Marketo I somehow lost the ability to have this be responsive, body, images and so on. Any pointers on how to correct this? Apologies if this is a very novice question! Any help is appreciated

<!doctype html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>IMS Template</title>

<style type="text/css">

.image {

position: relative;

}

tr .main .image {

}

.responsive-image {

width: 75%;

height: auto;

}

.respon {

}

.LINK {

}

.center {

margin-left: auto;

margin-right: auto;

}

.float {

}

</style>

</head>

<body class="body" style="padding:0 !important; margin:0 !important; display:block !important; min-width:100% !important; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none;">

<!--[if gte mso 9]>

<xml>

<o:OfficeDocumentSettings>

<o:AllowPNG />

<o:PixelsPerInch>96</o:PixelsPerInch>

</o:OfficeDocumentSettings>

</xml>

<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<meta http-equiv="x-ua-compatible" content="IE=edge">

<meta name="format-detection" content="date=no">

<meta name="format-detection" content="address=no">

<meta name="format-detection" content="telephone=no">

<meta name="x-apple-disable-message-reformatting">

<!--[if !mso]><!-->

<link href="./How to travel smarter (+ not get sick)._files/css" rel="stylesheet">

<!--<![endif]-->

<title>Cleanroom Supplies from IMS</title>

<!--[if gte mso 9]>

<style>

sup {

font-size:100% !important;

}

</style>

<![endif]-->

<style type="text/css">

body{

padding:0 !important;

margin:0 !important;

display:block !important;

min-width:100% !important;

width:100% !important;

background:#ffffff;

-webkit-text-size-adjust:none;

}

a{

color:#000000;

text-decoration:none;

}

p{

padding:0 !important;

margin:0 !important;

}

img{

-ms-interpolation-mode:bicubic;

}

.mcnPreviewText{

display:none !important;

}

.h4 a,.text-footer a{

color:#ffffff !important;

}

@media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.mobile-shell{

width:100% !important;

min-width:100% !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.m-center{

text-align:center !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.table-center{

margin:0 auto !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.td{

width:100% !important;

min-width:100% !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.mobile-br-1{

height:1px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.mobile-br-5{

height:5px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.mobile-br-10{

height:10px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.m-td,.mobile-hide{

display:none !important;

width:0 !important;

height:0 !important;

font-size:0 !important;

line-height:0 !important;

min-height:0 !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.mobile-block{

display:block !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.fluid-img img{

width:100% !important;

max-width:100% !important;

height:auto !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.column-top,.column{

float:left !important;

width:100% !important;

display:block !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.content-spacing{

width:15px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.content-spacing2{

width:45px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.footer,.section{

padding:25px 15px 35px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.section-quote-block{

padding-left:15px !important;

padding-right:15px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.section-open-block{

padding:25px 15px 5px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.section-learn-more,.section-title-block{

padding-left:15px !important;

padding-right:15px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.h1-subtitle,.pb30{

padding-bottom:30px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.pb25{

padding-bottom:25px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.pt30{

padding-top:30px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.pt0{

padding-top:0 !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.h4,.text-footer{

text-align:center !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.text-quote{

font-size:27px !important;

line-height:35px !important;

padding-bottom:20px !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.text-quote br{

display:none !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.h1{

font-size:39px !important;

line-height:44px !important;

}

}</style>

<!--

-->

<!--[if !gte mso 9]><!-->

<span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">Easy solutions to the most common problems</span>

<!--<![endif]-->

<!--

-->

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">

<tbody>

<tr>

<td align="center" valign="top">

<table width="600" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">

<tbody>

<tr>

<td class="td" style="width:600px;min-width:600px;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td class="main" style="border:1px solid #000000;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<!-- Navigation -->

<td align="center" class="navigation mobile-hide" style="padding:14px 40px 12px;border-bottom:1px solid #000000;">

<table border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<th class="column" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td class="text-nav" style="color:#1b5992;font-family:Arial, sans-serif;font-size:11px;line-height:15px;text-align:center;letter-spacing:1px;">

<div>

<span class="mktEditable" id="portallink" mktoname="Portal Link" style="color:#1b5992; text-decoration:none;"><a href="https://myims.cloud/">IMS PORTAL</a></span>

</div> </td>

</tr>

</tbody>

</table> </th>

<th class="column" width="75" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">

<div style="font-size:0pt;line-height:0pt;" class="mobile-br-10"></div> </th>

<th class="column" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td class="text-nav" style="color:#1b5992;font-family:Arial, sans-serif;font-size:11px;line-height:15px;text-align:center;letter-spacing:1px;">

<div>

<span class="mktEditable" id="cataloglink" mktoname="Catalog Link" style="color:#1b5992; text-decoration:none;"><a href="http://www.integratedmedsys.com/wp-content/uploads/2018/11/IMS-USP-797-800-Product-Catalog-V2-WEB.pdf">CATALOG</a></span>

</div> </td>

</tr>

</tbody>

</table> </th>

<th class="column" width="75" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">

<div style="font-size:0pt;line-height:0pt;" class="mobile-br-10"></div> </th>

<th class="column" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td class="text-nav" style="color:#1b5992;font-family:Arial, sans-serif;font-size:11px;line-height:15px;text-align:center;letter-spacing:1px;">

<div>

<span class="mktEditable" id="aboutus" mktoname="About Us Link" style="color:#1b5992; text-decoration:none;"><a href="http://www.integratedmedsys.com/about/">ABOUT US</a></span>

</div> </td>

</tr>

</tbody>

</table> </th>

<th class="column" width="75" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">

<div style="font-size:0pt;line-height:0pt;" class="mobile-br-10"></div> </th>

<th class="column" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td class="mktEditable" id="contactlink" mktoname="Contact Us Link" style="color:#1b5992;font-family:Arial, sans-serif;font-size:11px;line-height:15px;text-align:center;letter-spacing:1px;">

<div>

<span style="color: #000000;"><a href="mailto:info@integratedmedsys.com" target="_blank" id="" style="color: #000000;">CONTACT</a></span>

</div></td>

</tr>

</tbody>

</table> </th>

</tr>

</tbody>

</table> </td>

<!-- END Navigation -->

</tr>

<tr>

<!-- Logo -->

<td class="header img-center" style="padding:30px 0 24px;border-bottom:1px solid #000000;font-size:0pt;line-height:0pt;text-align:center;"><a href="www.integratedmedsys.com"><img src="http://na-sj24.marketo.com/rs/042-QEN-612/images/logo Marketo-01.png"></a> </td>

<!-- END Logo -->

</tr>

<tr mc:repeatable="repeat_1" mc:variant="Full Width Image" mc:repeatindex="0">

<!-- Hero Image -->

<td class="fluid-img" style="font-size:0pt;line-height:0pt;text-align:left;"> <a href="https://thenueco.us14.list-manage.com/track/click?u=af06149b8342a8b3786a2a3df&amp;id=d1163497ac&amp;e=6898af623d" target="_blank" style="color: #000000;text-decoration: none;"></a> </td>

<!-- END Hero Image -->

</tr>

<tr mc:repeatable="repeat_1" mc:variant="Section Block" mc:repeatindex="1">

<!-- Section Block -->

</tr>

</tbody>

</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr mc:repeatable="repeat_1" mc:variant="Section Block" mc:repeatindex="1">

<td class="section section-block" bgcolor="#FEFCFF" style="border-bottom:1px solid #000000;padding:46px 50px 67px;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td class="mktEditable" id="subheader" mktoname="subheader" style="padding-bottom:16px;color:#1b5992;font-family:Arial, sans-serif;font-size:13px;line-height:17px;text-align:left;letter-spacing:2px;font-weight:bold;">

<div>

USP &lt;797&gt; &lt;800&gt; Compliance

</div></td>

</tr>

<tr>

<td class="mktEditable" id="mainheader" mktoname="Main Header" style="padding-bottom:26px;color:#000000;font-family:Arial, sans-serif;font-size:33px;line-height:37px;text-align:left;letter-spacing:2px;">

<div>

Cleanroom Supplies From IMS.

</div></td>

</tr>

<tr>

</tr>

</tbody>

</table> <img img class="mktoImg" id="HeroImage" src="http://na-sj24.marketo.com/rs/042-QEN-612/images/Cleanroom Hero Image.png" width="640" height="353" style="" mktoname="Hero Image" mktolockimgsize="true">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td class="mktEditable" id="exampleText" mktoname="Main Body Text" style="padding-bottom: 37px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: left; letter-spacing: 1px; float: left; width: auto;">

<div>

<p style="padding: 0 !important; margin: 0 !important;"> </p>

<p style="padding: 0 !important; margin: 0 !important;">Integrated Medical Systems, Inc. understands your need to reduce risk in your controlled environment. The IMS Cleanroom Product Catalog offers a comprehensive selection of clean-processed and sterile single-use protective clothing, sterile alcohol, and wipers to support your USP cleanroom control needs at the best price.</p>

<p style="padding: 0 !important; margin: 0 !important;"> </p>

<p style="padding: 0 !important; margin: 0 !important;">USP Chapter &lt;800&gt; updates USP &lt;797&gt; regulations, increasing pharmaceutical worker protection for handling of chemotherapy and other hazardous drugs (HD) in medical centers, hospital pharmacies and compounding pharmacies. New regulations will take effect in December 2019. Click here to review the new guidelines.</p>

<p style="padding: 0 !important; margin: 0 !important;"> </p>

<p style="padding: 0 !important; margin: 0 !important;">IMS offers affordable products to assist in USP &lt;797 &lt;800&gt; cleanroom compliance. Click the links below to view our cleanroom product line.</p>

<p style="padding: 0 !important; margin: 0 !important;"> </p>

<div>

<div style="float: left; width: 50%;">

<u><strong>Personal Protection</strong></u>

<ul>

<li><a href="https://myims.cloud/Disposables/Manufacturers/Manufacturer/102721/">Gloves (Sterile &amp; Non Sterile)</a></li>

<li><a href="https://myims.cloud/Disposables/Catalog/Category/0/?Search=face+mask">Face Masks</a></li>

<li><a href="https://myims.cloud/Disposables/Catalog/Category/0/?Search=nurse%20caps">Caps</a></li>

<li><a href="https://myims.cloud/Disposables/Catalog/Category/0/?Search=shoe%20cover%20nc">Shoe Covers</a></li>

<li><a href="https://myims.cloud/Disposables/Catalog/Category/0/?Search=cleanroom%20coverall">Coveralls</a></li>

<li><a href="https://myims.cloud/Disposables/Catalog/Category/0/?Search=cleanroom%20gown">Sterile Gowns</a></li>

<li><a href="https://myims.cloud/Disposables/Catalog/Category/0/?Search=lab%20coats%20cs">Lab Coats</a></li>

</ul>

</div>

<div style="float: right; width: 50%;">

<u><strong>Wipers &amp; Sterile Alcohol</strong></u>

<ul>

<li><a href="https://myims.cloud/Disposables/Catalog/Category/0/?Search=sterile%20wipers">Sterile Wipers</a></li>

<li><a href="https://myims.cloud/Disposables/Catalog/Category/0/?Search=pre-wetted%20wipers">Pre-Wetted Wipers</a></li>

<li><a href="https://myims.cloud/Disposables/Catalog/Category/0/?Search=dry+wipers">Dry Wipers</a></li>

<li><a href="https://myims.cloud/Disposables/Catalog/Category/0/?Search=sterile+ipa">70% Sterile IPA Spray</a></li>

</ul>

</div>

</div>

<p> </p>

</div></td>

</tr>

<tr>

<td align="center">

<!-- Button -->

<table border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td style="border:1px solid #000000;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="center">

<tbody>

<tr>

<td>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td class="mktEditable" id="portal" mktoname="Portal Link Text" style="color:#1b5992;font-family:Arial, sans-serif;font-size:13px;line-height:17px;text-align:center;padding:14px 20px;letter-spacing:2px;">

<div>

<span style="color: #1b5992;"><strong><a href="myims.cloud" target="_blank" id="" style="color: #1b5992;">View the IMS Portal</a></strong> </span>

<br>

</div></td>

</tr>

</tbody>

</table> </td>

<td class="img" width="1" bgcolor="#000000" style="font-size:0pt;line-height:0pt;text-align:left;"></td>

<td width="45" style="font-size:0pt;line-height:0pt;text-align:center;"><img class="mktoImg" id="Portalarrow" src="http://na-sj24.marketo.com/rs/042-QEN-612/images/8f974737-7719-4695-b195-9d1f7bb7d505.png" border="0" style="margin: 0;padding: 0;max-width: 19px;-ms-interpolation-mode: bicubic;" mktoname="PortalArrow" mktolockimgsize="true"> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<!-- END Button --> </td>

</tr>

</tbody>

</table> </td>

<!-- END Section Block -->

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<!-- Footer -->

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#1b5992">

<tbody>

<tr>

<td class="footer" style="padding:90px 50px 120px;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td style="padding-bottom:65px;" class="pb30">

<!-- Socials -->

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<th class="column-top" width="120" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">

<div class="img m-center" style="font-size:0pt;line-height:0pt;text-align:left;">

<a href="https://thenueco.us14.list-manage.com/track/click?u=af06149b8342a8b3786a2a3df&amp;id=27bd93b09d&amp;e=6898af623d" target="_blank" style="color: #000000;text-decoration: none;"></a>

</div> </th>

<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td align="right" class="pt30">

<table class="table-center" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td class="img" width="18" style="font-size:0pt;line-height:0pt;text-align:left;"><a href="https://thenueco.us14.list-manage.com/track/click?u=af06149b8342a8b3786a2a3df&amp;id=873d9f8b22&amp;e=6898af623d" target="_blank" style="color: #000000;text-decoration: none;"></a> </td>

<td class="img" width="25" style="font-size:0pt;line-height:0pt;text-align:left;"></td>

<td class="img" width="18" style="font-size:0pt;line-height:0pt;text-align:left;"><a href="https://thenueco.us14.list-manage.com/track/click?u=af06149b8342a8b3786a2a3df&amp;id=532f5bbf2a&amp;e=6898af623d" target="_blank" style="color: #000000;text-decoration: none;"></a> </td>

<td class="img" width="25" style="font-size:0pt;line-height:0pt;text-align:left;"></td>

<td class="img" width="18" style="font-size:0pt;line-height:0pt;text-align:left;"><a href="https://www.linkedin.com/company/integrated-medical-systems-inc." target="_blank" style="color: #000000;text-decoration: none;"><img src="http://na-sj24.marketo.com/rs/042-QEN-612/images/linkedin-logo.png" alt="" border="0" style="margin: 0;padding: 0;max-width: 18px;-ms-interpolation-mode: bicubic;"></a> </td>

<td class="img" width="25" style="font-size:0pt;line-height:0pt;text-align:left;"></td>

<td class="img" width="18" style="font-size:0pt;line-height:0pt;text-align:left;"><a href="mailto:info@integratedmedsys.com" style="color: #000000;text-decoration: none;"><img src="http://na-sj24.marketo.com/rs/042-QEN-612/images/envelope.png" alt="" border="0" style="margin: 0;padding: 0;max-width: 18px;-ms-interpolation-mode: bicubic;"></a> </td>

</tr>

</tbody>

</table> </td>

<td class="mobile-hide" width="25"></td>

</tr>

</tbody>

</table> </th>

</tr>

</tbody>

</table>

<!-- END Socials --> </td>

</tr>

<tr>

<td>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<th class="column-top" width="120" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td class="h4" style="padding-bottom:17px;color:#ffffff;font-family:Arial, sans-serif;font-size:20px;line-height:24px;text-align:left;font-weight:bold;">

<div>

Quick Links

</div> </td>

</tr>

<tr>

<td class="mktEditable" id="footer1" mktoname="Footer 1" style="color:#ffffff;font-family:Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;">

<div>

<span style="color: #ffffff;"><a href="myims.cloud" target="_blank" id="" style="color: #ffffff;">myims.cloud</a></span>

<br>

<span style="color: #ffffff;"> <a href="https://www.usp.org/compounding" style="color: #ffffff;"> USP Guidelines</a> </span>

<br>

<span style="color: #ffffff;"> <a href="mailto:info@integratedmedsys.com" target="_blank" id="" style="color: #ffffff;">Email Us</a></span>

</div></td>

</tr>

</tbody>

</table> </th>

<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td align="right">

<table class="table-center" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td class="h4" style="padding-bottom:17px;color:#ffffff;font-family:Arial, sans-serif;font-size:20px;line-height:24px;text-align:left;font-weight:bold;">

<div>

Customer Service

</div> </td>

</tr>

<tr>

<td class="mktEditable" id="footer2" mktoname="Footer 2" style="color:#ffffff;font-family:Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;">

<div>

<span style="color: #ffffff;"><a href="mailto:info@integratedmedsys.com" target="_blank" id="" style="color: #ffffff;">Contact Us</a></span>

</div></td>

</tr>

</tbody>

</table> </td>

<td class="mobile-hide" width="25"></td>

</tr>

</tbody>

</table> </th>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<!-- END Footer --> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<center>

<br>

<br>

<br>

<br>

<br>

<br>

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">

<tbody>

<tr>

<td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">

<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">

<tbody>

<tr>

<td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;"> This email was sent to <a href="mailto:" target="_blank" style="color:#404040 !important;">(insert tag)</a> <br> <a href="https://reallygoodemails.com/wp-content/uploads/how-to-travel-smarter-not-get-sick.html#" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a>    <a href="https://reallygoodemails.com/wp-content/uploads/how-to-travel-smarter-not-get-sick.html#" style="color:#404040 !important;">unsubscribe from this list</a>    <a href="https://reallygoodemails.com/wp-content/uploads/how-to-travel-smarter-not-get-sick.html#" style="color:#404040 !important;">update subscription preferences</a> <br> Integrated Medical Systems, Inc. 12600 Holiday Drive, Alsip, IL<br> <br></td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<style type="text/css">

@media only screen and (max-width: 480px){

table#canspamBar td{font-size:14px !important;}

table#canspamBar td a{display:block !important; margin-top:10px !important;}

}

</style>

</center>

</body>

</html>

1 ACCEPTED SOLUTION

Accepted Solutions
Grace_Brebner3
Level 10

Re: Lost Responsive Elements, (Newbie)

Hey Shaun,

Firstly, welcome to Marketo + community

To your question, your images are not set to be responsive, which is your issue. You do have a media query + class to enable this, you just need to add the class to your images - e.g., class="fluid-img".

Side note; your media queries close and repeat when they don't need to - you can leave them open and move onto the next class without having to repeat the opening - e.g., where you're currently doing this:

@media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.mobile-block{

display:block !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.fluid-img img{

width:100% !important;

max-width:100% !important;

height:auto !important;

}

}

You can do this instead:

@media only screen and (max-device-width: 480px),only screen and (max-width: 480px) {

.mobile-block {

display:block !important;

}

.fluid-img img {

width:100% !important;

max-width:100% !important;

height:auto !important;

}

}

Personally I prefer this way as I find it tidier, and it cuts the number of lines in the file.

+ Obligatory, if you're learning to code for email I strongly recommend investing in a tool like Litmus or Email on Acid; building a template that works responsively across the majority of email clients is difficult and nigh on impossible without a good testing tool. Personally I use Litmus. I'm also of the self taught school of dev, and probably still do things in ways that a properly educated developer would shudder at, but those types of tools are indispensable to me.

Hope that helps

View solution in original post

3 REPLIES 3
Grace_Brebner3
Level 10

Re: Lost Responsive Elements, (Newbie)

Hey Shaun,

Firstly, welcome to Marketo + community

To your question, your images are not set to be responsive, which is your issue. You do have a media query + class to enable this, you just need to add the class to your images - e.g., class="fluid-img".

Side note; your media queries close and repeat when they don't need to - you can leave them open and move onto the next class without having to repeat the opening - e.g., where you're currently doing this:

@media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.mobile-block{

display:block !important;

}

} @media only screen and (max-device-width: 480px),only screen and (max-width: 480px){

.fluid-img img{

width:100% !important;

max-width:100% !important;

height:auto !important;

}

}

You can do this instead:

@media only screen and (max-device-width: 480px),only screen and (max-width: 480px) {

.mobile-block {

display:block !important;

}

.fluid-img img {

width:100% !important;

max-width:100% !important;

height:auto !important;

}

}

Personally I prefer this way as I find it tidier, and it cuts the number of lines in the file.

+ Obligatory, if you're learning to code for email I strongly recommend investing in a tool like Litmus or Email on Acid; building a template that works responsively across the majority of email clients is difficult and nigh on impossible without a good testing tool. Personally I use Litmus. I'm also of the self taught school of dev, and probably still do things in ways that a properly educated developer would shudder at, but those types of tools are indispensable to me.

Hope that helps

Shaun_Emerson1
Level 1

Re: Lost Responsive Elements, (Newbie)

Hi Grace,

Thank you! That corrected it!

Grace_Brebner3
Level 10

Re: Lost Responsive Elements, (Newbie)

Great!

Please go ahead and mark my original response as correct so that this thread shows as resolved. If you have any follow up questions you can open a new thread for them