Cursor email

HTML Email Rendering Broken Across Email Clients

HTML emails generated by your Cursor-built application look great in the preview or in one email client, but are completely broken in others. Layouts collapse in Gmail, images don't load in Outlook, fonts revert to defaults in Yahoo Mail, and dark mode inverts your carefully chosen colors.

HTML email rendering is stuck in 1999 — email clients use wildly different HTML/CSS engines. Outlook uses Microsoft Word's HTML renderer, Gmail strips most CSS, and Apple Mail has its own quirks. Cursor generates modern HTML/CSS that works perfectly in browsers but violates almost every constraint of email client rendering.

The issue affects your brand perception and functionality. Broken emails look unprofessional, can obscure important content like verification links, and may even trigger spam filters that look for malformed HTML.

Error Messages You Might See

Email looks different in Gmail vs Outlook Images not showing in email Layout broken in Outlook desktop Email landing in spam folder Fonts rendering differently across email clients
Email looks different in Gmail vs OutlookImages not showing in emailLayout broken in Outlook desktopEmail landing in spam folderFonts rendering differently across email clients

Common Causes

  • External CSS stylesheets — Cursor linked to an external CSS file or used <style> blocks in the head, which Gmail and many clients completely strip
  • Modern CSS properties — Flexbox, Grid, CSS variables, and media queries are unsupported in most email clients, especially Outlook
  • Div-based layout — Cursor generated div-based layouts instead of table-based layouts, which are the only reliable layout method for email
  • Images without alt text or dimensions — Images block loading by default in many clients. Without explicit width/height attributes, layouts break when images are hidden
  • Web fonts and custom fonts — Custom font imports are ignored by most email clients, causing text to render in fallback system fonts with different sizing
  • Dark mode not handled — Email clients' dark mode inverts colors unpredictably, making light text on light backgrounds or dark text on dark backgrounds

How to Fix It

  1. Use inline CSS only — Move all styles to inline style attributes on each HTML element. Use a CSS inliner tool like juice or Premailer to automate this conversion
  2. Use table-based layouts — Replace all div layouts with nested <table> elements. Use role="presentation" for accessibility. This is the only reliable cross-client layout method
  3. Use a tested email framework — Replace Cursor's custom HTML with a battle-tested email framework like MJML, React Email, or Maizzle that compiles to compatible HTML
  4. Add explicit image dimensions — Always include width and height attributes on img tags, and add alt text so content makes sense when images are blocked
  5. Test across email clients — Use Litmus or Email on Acid to preview your emails in 90+ email clients before sending
  6. Handle dark mode explicitly — Add @media (prefers-color-scheme: dark) styles and use the color-scheme meta tag. Provide both light and dark versions of logos

Real developers can help you.

Bastien Labelle Bastien Labelle Full stack dev w/ 20+ years of experience Stanislav Prigodich Stanislav Prigodich 15+ years building iOS and web apps at startups and enterprise companies. I want to use that experience to help builders ship real products - when something breaks, I'm here to fix it. Alvin Voo Alvin Voo I’ve watched the tech landscape evolve over the last decade—from the structured days of Java Server Pages to the current "wild west" of Agentic-driven development. While AI can "vibe" a frontend into existence, I specialize in the architecture that keeps it from collapsing. My expertise lies in the critical backend infrastructure: the parts that must be fast, secure, and scalable. I thrive on high-pressure environments, such as when I had only three weeks to architect and launch an Ethereum redemption system with minimal prior crypto knowledge, turning it into a major revenue stream. What I bring to your project: Forensic Debugging: I don't just "patch" bugs; I use tools like Datadog and Explain Analyzers to map out bottlenecks and resolve root causes—like significantly reducing memory usage by optimizing complex DB joins. Full-Stack Context: Deep experience in Node.js and React, ensuring backends play perfectly with mobile and web teams. Sanity in the Age of AI: I bridge the gap between "best practices" and modern speed, ensuring your project isn't just built fast, but built to last. Simon A. Simon A. I'm a backend developer building APIs, emulators, and interactive game systems. Professionally, I've developed Java/Spring reporting solutions, managed relational and NoSQL databases, and implemented CI/CD workflows. Jaime Orts-Caroff Jaime Orts-Caroff I'm a Senior Android developer, open to work in various fields Taufan Taufan I’m a product-focused engineer and tech leader who builds scalable systems and turns ideas into production-ready platforms. Over the past years, I’ve worked across startups and fast-moving teams, leading backend architecture, improving system reliability, and shipping products used by thousands of users. My strength is not just writing code — but connecting product vision, technical execution, and business impact. rayush33 rayush33 JavaScript (React.js, React Native, Node.js) Developer with demonstrated industry experience of 4+ years, actively looking for opportunities to hone my skills as well as help small-scale business owners with solutions to technical problems Jacek Rozanski Jacek Rozanski Senior PHP/Symfony developer and DevOps engineer with 20+ years of professional experience, running opcode.pl (web development agency, est. 2004). Day job: I'm the sole backend developer at merketing company where I own and maintain 11 PHP/Symfony microservices on AWS (ECS Fargate, RDS, S3, CloudFront), handle the full CI/CD pipeline (Bitbucket Pipelines, Docker), and manage monitoring with Sentry and CloudWatch. These services handle high request volumes in production every month. What I bring to AI-built apps: - I audit and fix security issues (OWASP methodology), performance bottlenecks, and architectural problems in codebases generated by Cursor, Claude Code, Lovable, Bolt, and v0 - I refactor AI-generated prototypes into production-grade applications with proper error handling, testing, and clean architecture (SOLID, DDD, hexagonal architecture) - I set up the infrastructure AI tools don't touch: AWS hosting, CI/CD pipelines, automated deployments, database optimization, monitoring, and alerting - I integrate external services: payment providers, email systems, partner APIs, SSO/auth Tech stack: PHP 8.x, Symfony, React, Next.js, PostgreSQL, MySQL, Docker, AWS (ECS, RDS, S3, SQS/SNS, CloudFront), Terraform, Supabase. I also use AI tools daily (Claude Code, Cursor) in my own workflow, so I understand both the strengths and the gaps in AI-generated code. Based in Poland (CET timezone). Available for async work and calls during EU/US business hours. Meïr Ankri Meïr Ankri Full-stack developer specializing in React / Next.js / Node.js with 6+ years of experience. I've worked across various sectors including automotive (Reezocar/Société Générale), healthcare (Medical Link SaaS), and e-commerce (Glasman). I build web apps end-to-end, from architecture to production, with a focus on scalability, performance, and code quality. I also mentor junior developers and contribute to technical decisions and code reviews. Matthew Jordan Matthew Jordan I've been working at a large software company named Kainos for 2 years, and mainly specialise in Platform Engineering. I regularly enjoy working on software products outside of work, and I'm a huge fan of game development using Unity. I personally enjoy Python & C# in my spare time, but I also specialise in multiple different platform-related technologies from my day job.

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help

Frequently Asked Questions

Why can't I use modern CSS in emails?

Email clients use different rendering engines than browsers. Outlook uses Microsoft Word's HTML renderer (which barely supports CSS2), Gmail strips all CSS from the head and only keeps inline styles, and each client has its own quirks. Stick to inline CSS, table layouts, and basic CSS properties.

What is the best way to create HTML emails?

Use a purpose-built email framework: MJML (markup language that compiles to compatible HTML), React Email (for React developers), or Maizzle (Tailwind CSS for emails). These frameworks handle cross-client compatibility so you don't have to.

Related Cursor Issues

Can't fix it yourself?
Real developers can help.

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help