Inside of the media query (which will trigger on iPhones and similar hand-held devices) we will set up the image swap. only screen and (max-device-width: 489px) This image is the default image, and will appear on all desktop clients as well as all Gmail clients. All of the magic is accomplished through CSS.
Īs you can see, this technique requires no inline styles. Gmail ignores the style block (and all media queries), so all Gmail users will see the “desktop” or default image. This swap should work for all mobile devices in their native apps, as well as all desktop and webmail clients. You can use it to show a cropped version of an image for mobile users or show one offer to desktop users and another for mobile users.Ĭheck out the code for our bulletproof image switch below.
However because most of them provide their own menu instead of just making the link clickable, it makes them incompatible (i.e.Being able to switch images for mobile is a handy trick to have for a number of reasons. My favorite being this one for its customizable settings: There are a few thunderbird addons that make it possible to easily open non-clickable plain text links in a browser: Since Conversations does a lot of transformations before rendering, it would be great if it could transform plain text links into clickable links, which would then make further plugin redundant and offer a more composable use case with other add-ons.