I have the same problem when using images with a set height and width in the template. On desktop they are automatically assigned an inline style="width: 200px !important;" when switching to mobile view, the !important overrides anything you write in the media query, no matter if I also add 'width:100%!important;' in the classname. This caused any image to always be the size chosen in the content block, also in mobile view, which does not look very good.
Trying to bypass this by uploading images in the exact size, ex. 200px with "auto width" toggled "On" in the settings, caused images to be pixelated in mobile view, as the media query stated "width: 100%;" and just stretched the images to fit the media size.
The solution I found was to add two classes for each image on the img tag in the content block HTML, ex. an image of 200 width got these two classes:
I then added, in the HTML of the Email template, one class called:
.img-200 {
width: 200px;
height: auto;
}
And another class under the preferred media query section called:
@media only screen and (max-width: 500px) {
.mobile-imgfull {
margin: auto !important;
width: 100% !important;
height: auto !important;
}
} Then I uploaded the images in a format twice the size we needed, ex. an image set to 200x200 in the template is originally made as 400x400.
It doesn't look right in the content block itself, as the code is set in the main email template, but it seems to work when dragging the block into the template.
This fixes the issue by inserting images that are in a higher resolution, which in turn will look good when stretched to 100% width on mobile.
Hope this can help others too
Cheers! /Timo
