Stack Overflow
Stack Overflow

Questions tagged [responsive-emails]

HTML email building is already a complicated task. The proliferation of mobile devices has made it even more complex. Depending on where you ask, responsive layouts have contributed to 10-15% improvement in open rates.

Use this tag for questions related to building responsive email layouts that accommodate both mobile and desktop clients.

29 questions
3
votes
1 answer

SendGrid Domain Authentication Heroku

I'm using heroku and need to authenticate domain for sendgrid. But i can't do so since heroku already have subdomain url like http://xyz.herokuapp.com . can anyone suggest a better way?
Muhammad Munib ur Rehman
  • 41
  • 3
3
votes
1 answer

By MJML, how to create a responsive email template with nested columns?

In MJML seems there is no way to nest mj-column's, So how do you create nested columns? This is what I'm trying to build: I tried using mj-section and mj-wrapper too but seems none of these tags can be nested.
Morteza
  • 2,097
  • 5
  • 28
  • 47
2
votes
1 answer

Why does outlook cut off some images for the email templates made with mjml?

So I have made the following templates with mjml. And for some strange reason the app links button images are not getting full height.Also, same happening for the social links icon images too. For both set of images I tried wrapping the icon images…
Junaid
  • 85
  • 8
2
votes
1 answer

Responsive email: reverse block stacking design for mobile

So essence of question: how can i make blocks stack in reverse order for mobile devices? A few illustrations: Example of design for full width Example of design for mobile and changes wanted I used mjml email framework for this thingy:
Alpose
  • 35
  • 7
2
votes
1 answer

Output option not working in MJML

I have written a gulp task to convert mjml file to html on change. Here is the code: gulp.task('mjml:dev', function () { return gulp.src(paths.mjmlWatch, {base: "./"}) .pipe(mjml(mjmlEngine, { output: '.phtml' })) …
ziishaned
  • 4,944
  • 3
  • 25
  • 32
2
votes
2 answers

Hiding content in GMail and Outlook not working with Zurb Ink implementation

I am experiencing an issue using the Desktop/Mobile show/hide functionality with Zurb Ink email framework. When I use the CSS below it works correctly in GMail, where the mobile content is hidden and only desktop is shown, but not in Outlook.…
crmpicco
  • 16,605
  • 26
  • 134
  • 210
1
vote
1 answer

iOS Rendering Email half the size

Issue I tested my email in Litmus and it renders at half the size of the email window only in iOS mobile phones as shown here. It sounds like Apple made this update in iOS 10 so users would have the ability to zoom into their email. I need help…
spz1
  • 47
  • 1
  • 9
1
vote
1 answer

How to target class within html table via media query?

I'm seriously stumped on this one. I'm attempting to use one of Dan Mall's recommended techniques for setting line breaks, but on mobile in an html email signature, just as a progressive enhancement where media queries are supported. I'm doing this…
Gregory Warner
  • 43
  • 8
1
vote
1 answer

How to make table cells responsive in iOS Mail App

I'm currently developing an email that has a 2-column layout in various places. I initially used
tags for each column, which worked great in every email client except older versions of Outlook (columns would render at 100% width, regardless of…
Bill Kroger
  • 55
  • 10
1
vote
2 answers

Responsive images in email

I'm wanting to serve an image to mobile devices and different image to desktop devices in an email. display: none works well for everything but Outlook and Gmail. The image has a button on it, but on mobile, the text in the button gets too small.…
Ian
  • 45
  • 8
0
votes
1 answer

Creating an html code responsive email in Outlook 365

I have created a single column responsive HTML email that I am able to send through Outlook 365. However, I am having trouble with multi-column layouts that are supposed to flow into a single column on mobile devices. While testing the code on email…
Kim Brucker
  • 1
0
votes
2 answers

Extra whitespace under image in table - html email

I have this module for a responsive email design that inserts a little tiny amount of whitespace below my images and I can't figure out why. It doesn't seem to matter what the proportions or size of the image are. Always the same amount of space. I…
Nolan B
  • 21
  • 2
0
votes
0 answers

How to fix vertical alignment with line height while making email template with mjml?

I am a complete noob to email development and so is the case with some properties of CSS like line-height and vertical align. I want to align an image vertically centered with the image but I am unable to do. I have added the word problem before the…
Junaid
  • 85
  • 8
0
votes
1 answer

MJML- is there a way to get text under two columns?

I am currently trying to get text to display under two columns in a section in the MJML email framework. The issue I am having is that I can put the text under 1 column or under the other. But I want to center this text under both columns in…
DataAnalystByNight
  • 3
  • 3
0
votes
1 answer

Html email is getting unresponsive in gmail crome browser, works fine in gmail app and console in google desktop

I am creating this email html template the html works responsively in google console and gmail mobile app, but gets distorted in mobile chrome gmail version. This image is the mobile responsiveness when i open in console in crome desktop this is…
vikram chharia
  • 1
  • 1
1
2