I've been working on this for a very long time and stuck... I slightly modified a responsive email template created by Litmus (https://litmus.com/resources/free-responsive-email-templates)for my own project. I assumed it would work with the Gmail app for Android but after testing on Litmus it looks like it doesn't. I'm confused because I've read on various sources that responsive css via media queries are supported on the Gmail app.

Here is the code I am using.

It behaves as I expected in my browser (Chrome) when viewed in the developer's tools mobile view. However, the design looks very different when viewed in the Gmail app for Android as you'll see. Here's a screenshot of a side by side comparison of Mobile view in Chrome vs. the Gmail App for Android. https://www.dropbox.com/s/i8vt4czl9rgmt1k/email-comparison.jpg?dl=0 For example, the text isn't center aligning, the images looks small, the button isn't spanning the full width.

I'd like to see what's going on but I'm unable to look under the hood since there's no way to see how the code is being rendered on the App. What does the community suggest I do to make this work. Gmail for Android is popular and I can't let it look broken on it. Any help with a solution or advice in the right direction would be really appreciated.