When Gmail displays an email with images turned off, the embedded styles load correctly initially. However, once you click on the "Display images below" link to enable images, Gmail re-renders the email markup with a new prefix for class names and IDs.
The issue arises when the email continues to be styled using the old version of the stylesheet, failing to update the prefixes to align with the current markup.
This causes any CSS rule reliant on class name or ID selectors to cease functioning as soon as images are activated, restricting only element name or wildcard selectors to work.
I am currently utilizing Mailchimp to insert an image by passing it through a merge tag |IMAGE|. However, during this problem in Gmail, I cannot access that image element directly. Does anyone have a solution for this?
<style>
.share-img img{
max-width: 60%;
margin-bottom: 5px;
}
@media screen and (max-width: 480px){
.share-img img{
max-width: 90%;
margin-bottom: 5px;
}
}
</style>
<div class="share-img" style="text-align: center; width: 100%;">*|IMAGE|*</div>
edit:
Here is an example demonstrating how Gmail adds unique strings before classes/IDs. The 'share-img' class from the stylesheet and the actual 'share-img' class each have distinct strings preceding them, causing issues with resizing the image properly.