Skip to main content

Get Support
Have a question? Let's get you an answer!

How Do I...? Troubleshooting Code & Webhooks Developer Zone

Other Help Resources
Wait, there's more! Check out these Community sourced spaces for additional resources.

Zapier Help Center Hire an Expert

Learning Resources
All of our best learning resources can be found here.

Featured Articles Show & Tell Zapier's products AI Hub Zapier Tools Hub

Share your knowledge
Give back to the Community by sharing your automation wins and helping to answer questions.

Share your success See unanswered questions User Groups

Other Learning Resources
Some of our favorite additional ways to upskill your Zapier knowledge.

Zapier Learn Zapier Blog Zapier Webinars

Product Updates
Check out what is new and upcoming with Zapier with our regular product updates.

Product Updates

Early Access Program
Want to join Early Access? Learn more here.

Hi there, 

I have a zap which creates an email in gmail response to a trigger. The problem I have is that I don’t appear to have a way of creating a font size which works for both mobile and desk top. 16 pixels is just about the right size on mobile but too big on laptop or desktop. 

 

In the Zapier editor, I don’t have access to the head, I can’t put a style tag in as Gmail strips it out, and I can’t use media queries with the style attribute.

 

So my question is if there’s a way to get around this?

 

Thanks for your help

Hi @Robert 

Feedback from ChatGPT:

You're right in that Gmail's email rendering strips out a lot of advanced styling options like `<style>` tags and media queries, limiting your flexibility when it comes to responsive design. However, there are still a few workarounds you can try to optimize font sizes across different devices:

### 1. **Use `<font>` Tags and Inline CSS for Scaling**
While inline CSS is limited, you can try using percentage-based font sizes or `em` units within inline styles. This will scale the font size somewhat across different screen sizes.

For example:
```html
<p style="font-size: 1em;">This is a paragraph with scalable font size.</p>
```

Or you could use percentages:
```html
<p style="font-size: 100%;">This is a paragraph with percentage-based font size.</p>
```

**Note:** Percentage and `em` units often scale better between desktop and mobile than fixed pixel values like `px`.

### 2. **Conditional Content Based on Screen Size (Limited Support)**
While Gmail doesn’t support media queries, some email clients do support conditional comments for certain behaviors. You can use this approach if you're targeting specific clients. However, this would only work in certain clients (like Outlook), and wouldn't apply to Gmail.

```html
<!--;if !mso]><!-->
<p style="font-size: 16px;">Mobile-friendly size.</p>
<!--<!lendif]-->
<!--;if mso]>
<p style="font-size: 14px;">Smaller size for desktop.</p>
<!lendif]-->
```

### 3. **Balance Font Size Between Devices**
You may have to settle for a "middle ground" font size. A size like `14px` or `15px` often works well across both mobile and desktop screens. This won't be perfect, but it ensures the text isn't too large on desktop while still readable on mobile.

### 4. **Use a Mobile-Friendly Template**
If you're sending marketing-style emails, consider using a pre-designed, mobile-friendly email template from an email service provider (ESP) that integrates with Zapier. Some ESPs (e.g., Mailchimp, SendGrid) offer email templates optimized for responsiveness across devices, and they can be triggered via Zapier in response to your Zap.

By leveraging these services, you can bypass Gmail's limited rendering and still create mobile-responsive emails.

### 5. **Use Images for Text (As a Last Resort)**
If you're just sending very simple, highly formatted text (such as a banner or header), you might consider converting that text into an image. This would render the same across all devices. But, it’s not a great option for accessibility or SEO, and it limits the email's flexibility.

Let me know if you'd like more information or guidance on any of these methods!

Hi @Robert 👋

Did the potential workarounds that Troy shared from ChatGPT help to get things solved?

Want to ensure you’re all squared away on this so please let us know whether you’re still stuck at all! 

Reply


Terms & Conditions