Image Resize for Mobile

  • 0
  • 1
  • Question
  • Updated 4 months ago
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: EOL CLEANUP

Hello, What is the best way to resize an image for the mobile version of an email? I am using a slightly customized version of one of the two generic Emma templates. On desktop version, I have one large photo lined up with two evenly spaced smaller photos beneath it. On mobile, these three images stack vertically, but they don’t line up evenly. This gives the mobile version some jagged margins, and feels just a bit unprofessional. I’ve poked around in the drag-n-drop editor, but I don’t see a wysiwyg way to fix this. Should I edit the html of the custom template to force the top image to be the same width as the other two images (300px)? How can I do that? Or is there a different, better way to achieve this? Thank you
Photo of Jake

Jake

  • 2 Posts
  • 0 Reply Likes

Posted 4 months ago

  • 0
  • 1
Photo of Bethany Woerner

Bethany Woerner, Champion

  • 40 Posts
  • 19 Reply Likes
Hey Jake,

Below are a few options that might help:

1. Make sure all of the images are the same dimensions before uploading them to Emma and select "best fit" when using the wysiwyg editor. While the images will still stack vertically on a mobile device, this will force them all to be the same size which will hopefully resolve your margin issue. With this fix, you will want to make sure that (a) all margins and padding are the same on each side for all of the images or (b) that you're using the two column format.

2. You can "break" the responsive code so that the email appears the same in all browsers. However, you'll want to test this to make sure it doesn't make things difficult to read on a mobile device.

3. You can hide an image in mobile design by inserting the class .mobile-hide within the html. Sometimes I have an image that works great on a desktop, but pulls the content down "below the fold" in mobile. When this is the case, using .mobile-hide can be extremely helpful.

I hope this helps! Let me know if you have any questions :)

- Bethany
Photo of Grey Stepp

Grey Stepp, Support Team Manager

  • 1699 Posts
  • 135 Reply Likes
Thanks Bethany, those are some great options!  
Photo of Jake

Jake

  • 2 Posts
  • 0 Reply Likes
Thanks Bethany! So #3 sounds like it might work. Could we also use .desktop-hide, effectively using two different images for mobile and desktop? And that all has to be done within the html template, not the wysiwyg? 
(Edited)
Photo of Bethany Woerner

Bethany Woerner, Champion

  • 40 Posts
  • 19 Reply Likes
I have never used that class before, but it seems plausible. And yes, it all has to be done within the "build your own" html template, not the wysiwyg.

Here is an Litmus article you might find helpful.