JB1
MailChimp Drag and Drop, Table Data Cells, and Responsive Stack With Labels: Help!
I have a simple enough task. Create a drag and drop template in Mailchimp that includes 2 sections with table data. Allow the client to add new rows and edit template.
Here's a Litmus test. I included one desktop layout, which works very well across all desktop clients. I also included all mobile previews, to show how the table was displaying the data.
https://litmus.com/checklist/public/e77a4fc
I believe the solution would be to stack the tables in a mobile preview. This would allow for longer brand names and larger numbers.
However, I believe there are 2 issues with this seemingly simple solution.
- I need labels with each item within the "stack". The data is meaningless uness accompanied by a label.
- This template was created as a simple drag and drop in Mailchimp. I did not want to take away any native functionality or lock out any options. If there's a solution to displaying labels for each item within the stack, how would I be able to insert the mobile device instructions if I cannot get into the main style sheet?
I appreciate your discussion and look forward to a solution.
JB
I found this page, http://alijafarian.com/responsive-html-tables/. The thead and th labels were helpful. But only on Apple devices. I still see a problem on Android. Is anyone aware of a fix?
Here's the Litmus test for the table fix I mention directly above
https://litmus.com/pub/3b99f62
Inserting the style sheet directly into a Mailchimp text edit box works, but Android is still not managing well. And the table data stacks on some desktop and Apple devices. An interesting situation!
https://litmus.com/pub/561e6b4
Hi Joi,
I think for what you are trying to achieve, you have two options.
1 - Make this email non-responsive.
2 - Lose the month column on the left.
Alternatively redesign how the data is shown.
There are hacks you could do, if this wasn't a template, but it is so I believe the two choices above are you're best options.
Goodluck
thanks, marc. i was able to explain the problem to the client and they accepted one of my solutions. i told them that if we were to stack the data to begin with that all devices would look the same, and labels with data cells would have ample room to display.
Problem solved ^_^