Email markup losing responsiveness after forwarding the email

Question

It is my first email mark up using Foundation for Emails.

<row class="content-section">
  <columns small="12">
    <spacer size="16"></spacer>
      <h3 class="title text-bold">Dear JJ,</h3>
      <p class="content-text">it is your one time password</p>
    <spacer size="16"></spacer>
    <form data-abide class="form-primary">
        <input class="input-primary input-large input-centered" type="text" value="36002117" readonly></input>
        <button href="#" class="btn-primary button-center radius text-center" type="submit">Login</button>
        <spacer size="16"></spacer>
        <small>This one time password is valid for 5 minutes from time it is generated.</small>
      </form>
    <spacer size="16"></spacer>
  </columns>
</row>

I'm testing emails using this service https://putsmail.com When I send this email directly and test it from mobile, responsive works, and when I test it in browser responsive works too. But when I forward this message responsive doesn't work. Tested with Gmail. I tested this behavior in other emails and there is no such problem. Any chance to correct this behavior? Thank you.

Answer 1

The short answer is you can't fix it. Different clients do different things to a forwarded message but most of them will strip out <style> blocks and in-turn cause styling issues. It's often suggested to avoid forwarding at all costs as it's out of your control.