CSS styling breaks for older emails in Gmail conversation threads except for the newest message

Other Questions Gmail
1

Gmail Conversation View CSS Issues

I built an HTML email template that works perfectly when Gmail’s conversation view is disabled. But when I turn on conversation view in Gmail settings, something weird happens with the styling.

The Problem:
When multiple emails from the same sender get grouped together in a conversation thread, only the newest email at the top displays correctly. All the older emails in that same thread lose most of their CSS formatting.

What I’ve Tried:
I tested adding different meta tags from other working templates but nothing fixed it. I thought maybe the background image URLs were causing issues, but that doesn’t make sense since the same CSS works fine outside of conversation view.

Sample CSS Structure:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <style type="text/css">
    #outlook a { padding: 0; }
    
    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    
    table, td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }
    
    img {
      border: 0;
      height: auto;
      outline: none;
      text-decoration: none;
    }
    
    p {
      display: block;
      margin: 15px 0;
    }
  </style>
  
  <style type="text/css">
    @media only screen and (min-width:480px) {
      .email-column-full {
        width: 100% !important;
        max-width: 100%;
      }
    }
  </style>
  
  <style type="text/css">
    @font-face {
      font-family: CustomFont;
      src: url('font-url-here') format('woff');
      font-weight: normal;
    }
    
    .hero-banner {
      background-size: 100% auto;
      background-position: center;
      background-repeat: no-repeat;
      height: 320px;
      background: url(background-image-url) center no-repeat;
      background-size: cover;
    }
    
    @media (min-width: 640px) {
      .hero-banner {
        height: 420px;
      }
    }
    
    .button-link {
      width: 250px;
      height: 45px;
      border-radius: 0 !important;
      background: url(button-bg-url) no-repeat !important;
      background-size: 250px 45px !important;
    }
  </style>
</head>

Additional Info:
This template was generated using MJML. Has anyone else run into this conversation view styling problem? Why would Gmail strip styles from older emails in a thread but keep them for the newest one?

2

Gmail’s conversation view has been stripping styles from older messages for years now, and it’s particularly brutal with background images and custom fonts. I’ve found that the threading algorithm treats each subsequent email as potentially malicious content, so it removes anything that could interfere with the display. What actually helped in my case was moving all critical styling to inline attributes rather than CSS blocks. Gmail seems to preserve inline styles better across threaded messages. Also worth noting that the background-image property gets completely stripped from older emails in threads - I had to replace hero banners with actual img tags to maintain consistency. The MJML factor is interesting though. I’ve noticed MJML sometimes generates redundant CSS that triggers Gmail’s filtering more aggressively. Try exporting your MJML to HTML and manually cleaning up the CSS to see if that reduces the stripping behavior.

3

yep, gmail kinda messes with older emails’ css in convo view. using inline styles might help a lot for crucial stuff since they usually stick around better. good luck!

4

This is actually a known limitation with Gmail’s conversation threading system. When Gmail groups emails together, it applies security restrictions to older messages in the thread to prevent potential conflicts between different email styles. The platform essentially sandboxes the CSS from previous emails to avoid style inheritance issues that could break the display.

From my experience dealing with similar issues, Gmail tends to be more aggressive about stripping external resources like custom fonts and background images from older threaded emails. The newer email gets priority treatment while older ones get processed through additional filtering layers.

One approach that worked for me was restructuring the template to rely less on complex CSS and more on table-based layouts with inline styling for critical elements. Also consider that MJML sometimes generates CSS that Gmail finds suspicious in threaded contexts, so you might want to test with a more basic hand-coded version to isolate whether the issue stems from the MJML output specifically.