Table token text issue - urgent

SanfordWhiteman
Level 10 - Community Moderator

Re: Table token text issue - urgent

It’s simply not possible to create table layouts that work in all mail clients without inline styles.

 

External <style> elements alone can never ensure the layout you want.

Dave_Roberts
Level 10

Re: Table token text issue - urgent

I think that even if you end up adding inline styles for the desktop display (assuming somewhere between 600 and 700px width), this'll still get squished in the mobile display and you're going to end up right back where you started if you're using a table like this to display the information.

 

A more straight-forward solution might be to paragraph the information rather than table it so that you've got something that's a bit more flexible for both desktop and mobile without needing to do much inline styling.

 

For example, a more text-first approach something like...

 

Area: Splashback

Item: 600mm Black Glass Siemens Induction Hob

Selected Choice: n/a

Qty: 1

 

Area: Siemens Appliances

Item: Combi Microwave, Single Oven & Hood Quartz Worktop

Selected Choice: n/a

Qty: 1

 

... might be easier to tokenize and fit into the email. 

 

The code for this might look something more like:

<!-- first item -->
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19px;">
<strong>Area:</strong> Splashback <br>
<strong>Item:</strong> 600mm Black Glass Siemens Induction Hob <br>
<strong>Selected Choice</strong> n/a <br>
<strong>Qty</strong> 1 <br>
<br>
</div>

<!-- second item -->
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19px;">
<strong>Area:</strong> Siemens Appliances <br>
<strong>Item:</strong> Combi Microwave, Single Oven &amp; Hood Quartz Worktop <br>
<strong>Selected Choice</strong> n/a <br>
<strong>Qty</strong> 1 <br>
<br>
</div>

 

and the HTML shell for the data would look something like:

<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19px;">
<strong>Area:</strong> [[TOKEN HERE]] <br>
<strong>Item:</strong> [[TOKEN HERE]] <br>
<strong>Selected Choice</strong> [[TOKEN HERE]] <br>
<strong>Qty</strong> [[TOKEN HERE]] <br>
<br>
</div>