I'm adjusting a custom MailChimp newsletter template. I tried to create the jagged edge box using the code for a table with multiple rows, it worked great in the MailChimp preview, but would not display correctly in Outlook or Gmail (i had no idea Gmail does not read z-index CSS code :( ). So I'm resorting to adding an image for each section instead of coding it so it will display correctly on all/most emails(Outlook still doesn't display images either).
The issue that I'm having is that the mobile Media Query image does not seem to work. The desktop image keeps showing up and it ends up cropped. But when I delete the desktop image and test the mobile version with the Media Query code, the correct mobile image shows up. I've been playing around with it trying to see if changing it from a .wideplate to a #wideplate would change anything but it didn't. I'm not sure what I am doing wrong. Here is my code:
<!---------Code for the desktop image------->
#wideplate{
min-width:100% !important;
background-image:url(https://gallery.mailchimp.com/ae29537a7dd6b198e989ee849/images/b641b63a-1c1e-4057-95b9-81f660318b88.png);
background-repeat:no-repeat;
}
<!---------Code for the mobile image------->
@media only screen and (max-width: 480px){
#wideplate{
background-image:url(https://gallery.mailchimp.com/ae29537a7dd6b198e989ee849/images/4287ef24-d799-4ec4-b56b-3cded7c13b1b.png);
margin-left:0;
background-size:cover;
}
}
This is the code that I have for the table that displays the correct desktop image, but it does not recognize the media query for mobile:
<table border="0" cellpadding="18" cellspacing="0" id="wideplate" width="100%">
This is what is being displayed with the code above:
This is what tt should look like if it used the media query, and what it looks like when I get rid of the desktop image from an id #wideplate to a class .wideplate:
I figured it out! I needed to add a '!important;' to override anything else and make the mobile version the priority when the size is for mobile. Here is the correct code:
#wideplate{
min-width:100% !important;
background-image:url(https://gallery.mailchimp.com/ae29537a7dd6b198e989ee849/images/b641b63a-1c1e-4057-95b9-81f660318b88.png) !important;
background-repeat:no-repeat !important;
}
@media only screen and (max-width: 480px){
#wideplate{
background-image:url(https://gallery.mailchimp.com/ae29537a7dd6b198e989ee849/images/4287ef24-d799-4ec4-b56b-3cded7c13b1b.png)!important;
margin-left:0 !important;
background-size:cover !important;
}
}