Responsive Editable Images


I've found the following problem with the CM editable images in responsive emails: when I use a bigger image, when rendered under a mobile device(for example an iPhone) the image changes its width but remains with the original width which deforms it and makes it look unprofessional.

If I use the same image but I hardcode it and upload it with the rest of the images I use in my email template, the image changes its proportions as per the device's resolution and the proportions are constrained.

Have you seen this problem/Do you have a solution?

paulw paulw, 2 years ago

Hey Kristina! Thanks for posting in the forums :)

When importing an image using our editor, the system does automatically set a height for any images and that's why you are seeing the problem here on mobile devices. An easy fix for this is to add the following line of CSS to your media query:

img { height: auto; line-height: 100%;}

This will ensure that the proportions of the image are constrained when shown on a mobile device. If you are continuing to see a problem though, it would be great to see an example of the code you are working with. Send the details across to us at support and we'd be happy to take a look.

Thanks again!

The Campaign Monitor Blog – HTML email smarts to go with your good looks.

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free