Responsive Editable Images

Hello,

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, 1 year 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.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098