td background image for mobile

Hello,

I am trying to use a background image in my template (and I am using the fix posted for Outlook).

The problem is that when the background image is displayed on a mobile device (testing on iPhone 4S), it is displayed full size and throws off the rest of the mobile layout.

I've tried adding a media query to the mobile styles to display an alternate background for that cell, but that line keeps getting stripped out every time I upload the new template. It looks like the main style is getting converted to inline during the upload... I thought the inline conversion didn't happen until send?

Here is the line of code I am trying to use for a 300px background to be used on a mobile device:

td[class=backgroundCell] { background-image:url(http://clients.themodmedia.com/modmedia/test/images/bg300.jpg) !important; height:673px!important; }

Any thoughts or suggestions on how to get this to work on a mobile device? Thanks!!!

roshodgekiss roshodgekiss, 5 years ago

Hi modmedia, welome to the forums! Working with height can usually get pretty tricky - may I recommend changing the cell width to fit the mobile display, instead (eg. width: 320px;)?

I've tried adding a media query to the mobile styles to display an alternate background for that cell, but that line keeps getting stripped out every time I upload the new template.

If possible, could you kindly post the code you're using here? It seems unusual that the media query should be getting inlined, as it's only meant to be read by mobile email clients.

Thanks, modmedia! I hope we can help with this :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098