Article suggestions
  1. Home
  2. Email Templates
  3. Fluid Images for Email Templates

Fluid Images for Email Templates

Fluid Images for Email Templates
  • avatar
Written by Chan Nier
Updated on February 18, 2025

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000066198

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:


Thank you for leaving a rating!
Did you find this article helpful?
0 out of 0 people found this article helpful so far
Can't find what you're looking for? Get in touch
How can we help?
Send your question below and we'll get back to you as soon as possible.
Cancel
translation missing: en.kb.default.contact_form_error
×
Thanks for your message!
Thanks for your message!
×