How can i build a simple responsive footer for my sendgrid template?

Question

I have a basic footer that would be super easy to create in almost any environment but email.

i am looking to do a email/phone/unsubscribe line to appear like

"email@email.com | 1-888-PHONENO (1-888-111-1111) | Unsubscribe"

works perfect in desktop view (600px width) but once i try and do anything responsive it dies and formats all crooked. I've had good luck with flex box with apple products, but many of the microsoft products (email clients) strip the flexbox out. so i am using table but finding it difficult to make it responsive.

I would use media queries but when i use display:none, it doesn't always work. it almost like the sendgrid console wont let me target certain elements. for example i can easily change the html background using html, but when i give classes to elements, nothing happens, id's either. its like the style doesnt get applied.

to solve this issue i'd be totally happy with writing different header/footers and then rendering them per the view (599 down, 600 up) if anyone has experience using media queries in emails or sendgrid please advise.

I could also write a responsive table but having trouble w how to set that up for the above. some of the items would need to be wrapped, like it would be ok to render on 2 lines in mobile as long as the style looked decent. right now it looks jacked.

Answer 1

you cant-

due to email clients rendering code totally different (some strip margins/padding, some strip flexbox, some strip other things from your css)

just stay to best practices: inline style, single column tables work good on almost anything. keep it simple.

I made a nice looking inline css flex box footer. looked great on mac/google products, looked like garbage on all outlook/samsung.

so i had to dumb down my beautiful footer to something that was more compliant across platforms.

litmus is a tool we bought that really helps. you basically just have to design it then test. litmus will show you previews on every possible email client so u can go thru and find a good balance of compatibility and design.

for sendgrid, the built in template and drag and drop option render good on everything. use the v3 api and dynamic templates. use a drag and drop then add html blocks to customize what u need to. use the drag and drop as much as possible because they build a robust html code for you. unless you want to manually type out a 600 line email that is totally disorganized.