Fluid Images for Email Templates
The most common maximum width for emails is 480px (the width of most phones in landscape orientation), which causes images wider than that 480px to overflow off of the screen.
By making the size of an image fluid, the image will automatically adjust to different screen sizes, solving this problem. We will go over code that can be used to achieve this functionality in custom Email Templates.
Please see the example below of how an image can look when viewed in an email on a mobile device if it is not fluid:
To avoid this issue, use this code when adding a banner/image to the email template:
<img src="http://example.com/image.jpg" style="height:auto !important; max-width:600px !important; width: 100% !important;">
For this example, the image source is: https://lapide.directoryup.com/images/JOIN.jpg
The image source is found by going into the Media Manager and right-clicking on the target image:
With this code included with the image in the email, the image will adjust to the width of the device it is being viewed on as shown below:
