Lost Responsive Elements, (Newbie)

Shaun_Emerson1 · ‎01-29-2019

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>

<head>

<title>IMS Template</title>

.image {

position: relative;

}

tr .main .image {

}

.responsive-image {

width: 75%;

height: auto;

}

.respon {

}

.LINK {

}

.center {

margin-left: auto;

margin-right: auto;

}

.float {

}

</style>

</head>

<!--[if gte mso 9]>

<xml>

<o:OfficeDocumentSettings>

<o:AllowPNG />

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

</o:OfficeDocumentSettings>

</xml>

<![endif]-->

<title>Cleanroom Supplies from IMS</title>

<!--[if gte mso 9]>

<style>

sup {

font-size:100% !important;

}

</style>

<![endif]-->

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>

<!--

-->

<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>

<!--

-->

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<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>

<tbody>

<tr>

<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>

<tbody>

<tr>

<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>

<tbody>

<tr>

<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>

</tr>

<tr>

</tr>

</tr>

</tr>

</tbody>

</table>

<tbody>

<tbody>

<tr>

<div>

USP <797> <800> Compliance

</div></td>

</tr>

<tr>

<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">

<tbody>

<tr>

<div>

<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;">USP Chapter <800> updates USP <797> 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;">IMS offers affordable products to assist in USP <797 <800> cleanroom compliance. Click the links below to view our cleanroom product line.</p>

<div>

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

<ul>

<li><a href="https://myims.cloud/Disposables/Manufacturers/Manufacturer/102721/">Gloves (Sterile & 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=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>

<u><strong>Wipers & 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></td>

</tr>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<td>

<tbody>

<tr>

<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>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </th>

<tbody>

<tr>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </th>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

<td>

<tbody>

<tr>

<tbody>

<tr>

<div>

Quick Links

</div> </td>

</tr>

<tr>

<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>

<tbody>

<tr>

<tbody>

<tr>

<div>

Customer Service

</div> </td>

</tr>

<tr>

<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>

</tr>

</tbody>

</table> </th>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<br>

<tbody>

<tr>

<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>

@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>

Grace_Brebner3 · ‎01-29-2019

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

Grace_Brebner3 · ‎01-29-2019

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 · ‎01-31-2019

Hi Grace,

Thank you! That corrected it!

Grace_Brebner3 · ‎01-31-2019

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

Lost Responsive Elements, (Newbie)

Lost Responsive Elements, (Newbie)

Re: Lost Responsive Elements, (Newbie)

Re: Lost Responsive Elements, (Newbie)

Re: Lost Responsive Elements, (Newbie)

Re: Lost Responsive Elements, (Newbie)