Email template responsive for desktop

[SanfordWhiteman]

That won’t work because it’s a secure link to your Marketo instance!

Pasting the code right here in the thread will be overwhelming. How about in a Github Gist?

[jzolinski]

Will this link work?

view-source:https://go.onsemi.com/index.php/email/emailWebview?md_id=2844 

[SanfordWhiteman]

Nope, and also we don’t want the Web View of an email asset, we want the template.

Please put the template code in a Gist.

[jzolinski]

Is this the link from Github that will allow you to view the code?

https://github.com/jzolinski/email_template/blob/main/coding

[jzolinski]

Yes it is. First time with Github, is there a better way to share the code to our email template? Any advice and suggestions are much appreciated.

[SanfordWhiteman]

This is good! You’ve given people an accessible source for your template code. It’s not a Gist which is what I was recommending but an actual Git project. But that’s fine.

[Jo_Pitts1]

@jzolinski ,

I downloaded this and did the following:

1. Replaced 1000 with 600
2. Replaced 430 with 258
3. Replaced 280 with 168
4. I also found a missing " in width part of the second image of the Header Image module.  So this code needs a " in it.  I'll let you see if you can find it yourself 🙂
   

   <tr class="mktoModule" id="marketoHeaderImageModule" mktoName="Header Image">
                                 <td bgcolor="#FFFFFF">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" role="presentation">
                                       <tr>
                                          <td style="padding: 0px; background-color: #FFFFFF;">
                                             <table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation">
                                                <tr>
                                                   <td class="fluid-img" style="font-size: 0pt; line-height: 0pt; text-align: center;">
                                                      <img src="https://go.onsemi.com/rs/767-FAW-709/images/header-shadow.png" width=600" border="0" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; width: 600px; margin: 0px auto; float: none;" alt="shadow" />
                                                   </td>
                                                </tr>
                                                <tr>
                                                   <td class="fluid-img" style="font-size: 0pt; line-height: 0pt; text-align: center;">
                                                     <img src="https://go.onsemi.com/rs/767-FAW-709/images/header-diagram-${header-image}.png" width=600" border="0" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; width: 600px; margin: 0px auto; float: none;" alt="onsemi" /></td>
                                                </tr>
                                             </table>
                                          </td>
                                       </tr>
                                    </table>
                                 </td>
                              </tr>​

That won't come close to fixing ALL of your problems, but it's a start.

let me know if you can take it from there, or reach out if you need more help

FWIW - I have also created a fork of your code, updated it there, and committed it back.

[jzolinski]

Hi Jo,

Thanks for the suggestions, I made changes you mentioned and now I can view the email in my inbox without having to scroll. And I did find the missing " in the width part of the Header Image module. 

Any other suggestions would be greatly appreciated.

[Jasbir_Kaur]

Hi @jzolinski,

If you can share your latest code, then definitely we can share our suggestions by looking your code.

[jzolinski]

Thanks Jasbir,

Here is the link to the gist with the updated code from your suggestions:

https://gist.github.com/jzolinski/2cd43f9091d9b9714d3eab7400907166

Also, i noticed that when I made the changes, I didn't need to scroll when viewing on my monitors, but when viewing on my laptop, the email was still big and required scrolling. Thoughts?