Yahoo mobile tags

Quick question on this topic:

http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/

I downloaded Dave Greiner's mobile template (which was made without the Yahoo code) from here:

http://www.campaignmonitor.com/blog/post/3442/mobile-email-design-in-practice/

Do I change:

. . . .
@media only screen and (max-device-width: 480px) {
         .header {
              font-size: 16px !important;
         }
         .table, .cell {
              width: 300px !important;
         }
. . . .

to:

. . . .
@media only screen and (max-device-width: 480px) {
         [class=header] {
              font-size: 16px !important;
         }
         [class=table], [class=cell] {
              width: 300px !important;
         }
. . . .

or do I need to preface all classes with "table", "td" etc. for it to work?

Thanks!

- Paul

roshodgekiss roshodgekiss, 5 years ago

Hi Paul, yes, you will have to prefix these styles with the HTML attribute, ie:

div[class="header"] {
              font-size: 16px !important;
         }
table[class="table"], td[class="cell"] {
              width: 300px !important;
         }

Thanks for letting us know about this template, I'll make sure I update it to use the new selectors instead. Good luck!


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