Forum Discussion
How do I make an email template mobile responsive?
I created an email template using the Blank Template option. It looks great on desktop but terrible on mobile devices.
I looked under the email settings page, but I do not see an option to make it mobile responsive. How do I do this?
MetroBOS this is for an HTML template, correct? You need to add a media query to your CSS to define classes that will inform the parameters and values for your design on mobile, if they're any different than what you've set for desktop.
In most cases, setting the width to 100% and the font size to a proper mobile device size should do the trick.
Sorry, I should have clarified. This was created using the Drag and Drop Editor option, not the HTML Editor option.
It'd be hard to say without looking at the actual template.
In the Drag & Drop Editor, when you switch to mobile preview, you have the option to adjust the padding for mobile devices only, if that's breaking the design. It could also be the image width that's breaking it - try setting it to full width on mobile on all images, and go from there.
I just tried creating a blank template with a bunch of different blocks and it's responsive by default. I haven't changed any of the values on the email settings page.
Hey MetroBOS
As Arso has mentioned, when you build in Drag and Drop it creates a mobile version by default, and you can view it in mobile preview.
If you are seeing issues, on the desktop view you should be able to see show and hide for destkop/mobile if there are features you wish to hide on one version or the other:In mobile preview, depending on the row or asset you may also get mobile specific options so you can adjust it to look different to desktop:
I also created a test example and it shows up okay on both desktop and mobile. Drag and Drop adds responsive code and MSO code by default, so it is generally pretty decent in a variety of formats.
It would be helpful to see a screenshot of desktop vs mobile so we can better diagnose what might be causing the issue. 😊When I go into the "Preview and Test" mode and select Mobile view, everything renders as expected:
But, when I go into the "Content" mode (i.e. the Build mode) and change the view to Mobile view, it's totally different. The content is not scaling for a smaller mobile screen. This is also how the email actually renders when sending a test.
