SOLVED

Re: Email template responsive for desktop

Go to solution
SanfordWhiteman
Level 10 - Community Moderator

Re: Email template responsive for desktop

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

Re: Email template responsive for desktop

SanfordWhiteman
Level 10 - Community Moderator

Re: Email template responsive for desktop

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

Re: Email template responsive for desktop

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

 

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

jzolinski
Level 2

Re: Email template responsive for desktop

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
Level 10 - Community Moderator

Re: Email template responsive for desktop

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
Level 10 - Community Advisor

Re: Email template responsive for desktop

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

Re: Email template responsive for desktop

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

Re: Email template responsive for desktop

Hi @jzolinski,

 

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

 

 

jzolinski
Level 2

Re: Email template responsive for desktop

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?