Marketo Responsive Email Templates

[Anonymous]

I have been using a combination of email templates from this link http://templates.marketo.com/category/responsive-email/  and I'm at a point right now where I'm trying to place an image at max width and then the responsive part stops working at the top section of the email layout but everything else below works fine. What am I doing wrong?

Is there a way I can show my code without having to copy and paste on here?

[Anonymous]

Yep, use Pastebin. Happy to help you diagnose your issue...

[Anonymous]

Here you go..

http://pastebin.com/LkMiBYjF


My issue is on line 336 where I placed my image, so far I have noticed that up in the styles on line 125 if I change the width to 100% it fixes the images that I want to span max width but messes with the images at the bottom that are suppose to stay at original width. Is there a way to control the responsive individually without having to affect it as a whole?

[Anonymous]

You've got other issues you need to work out as well, but just give that IMG a unique class (since you may eventually have other images that need to be responsive) and then write styles for it. I did the following:

Line 127 (below the current CSS):

  table[class="body"] img.img-responsive {

    width: 100% !important; height: auto !important;

  }

and:
 
<img src="http://info.the451group.com/rs/the451group/images/ejournal_image_580x195.jpg" alt="banner" class="img-responsive" />

[Anonymous]

Ok now my footer is not being responsive now, on lines 668 through 695 the width at 50% is dissabled when I shrink my browser at 400px for mobile device testing. My social icons line up vertical and not maintain the horizontal layout.

I tried bringing down the percentage on line 157 to 50% but it also affects the top section too

You can check out the code here:  http://pastebin.com/1GEij2B0

You also mentioned other issues to work out as well, what else is wrong with my set up?

[Pierce_Ujjainw3]

Hey Nio,

I'd suggest you try Knak. Knak makes building responsive Marketo emails and landing pages easy. You'll never have to look at code again.

Build your first template, free, here: www.knak.io