Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jacob Miranda
19,080 PointsHTML Email - Stacking <td>
I tried two different methods of turning a 2-column layout into a single column on mobile devices, but when I send a test email using the method in the HTML Email Design video it doesn't work. Fabio Carnerio applied a 'display' property with the value 'block' on 2 table cell elements, which worked in my browser, but not when I sent a test email.
I also tried putting two tables in a single table cell and when they are aligned 'left' and 'right', they stack but they don't realign in the center and full width on mobile.
Any suggestions on other methods? And would it help anyone if I posted the code to take a look at?
EDIT I simply sent it to myself from gmail/thunderbird and had issues with it, but when I actually sent it to myself from Mailchimp, it appears to work more how I was expecting it to.
1 Answer
Paul McCann
8,357 PointsI'd have to see the code, but a few things:
Make sure you have a viewport meta tag with content="width=device-width set. Otherwise it'll work in the browser, and not in the email clients that don't strip that out anyway (i.e. Gmail).
If using the display: block method make sure you override any width the tables and cells might have inline, with width: 100% !important;
Your issue is most likely due to the sending method but if not, try using one of the column methods at http://responsiveemailpatterns.com/