(Hybrid) Mobile-View on Gmail (on Android) has margin issues

[miamimabel]

Hello -

In the Hybrid template, the text margins do not line up when using the 2-column row above a 1-column row when viewing in the Gmail app on an Android. Attached is a screenshot.

I had previously reported the same issue for the Outlook mobile view, which currently looks good.

Thanks for looking into this!

[TedGoas]

@miamimabel Hi, I'm unable to reproduce this exactly example, but I have a theory about what's going on. In short, when the hybrid template displays in an email client that doesn't support media queries, the layout will always stack but the margins might not line up exactly in some places.

---

This is what i see when I place a 1 column text after two even columns in a version of Gmail that doesn't support media queries:

I haven't been able to reproduce this yet.

However in order to get stacking columns without media queries, it involves a clever implementation of padding, min-width, and max-width. Sometimes that leaves 30px of padding on the edges, but sometimes it leaves 20px depending on the pattern.

If this is an issue, you can try playing with the align attribute of the parent row. Eg. If something was originally aligning center, try aligning it left. You can also update the padding of various <td>s, though that will likely have an impact on the desktop layout.

---

Please let me know if you have any luck with the issue. I'll leave this open.

[TedGoas]

@miamimabel Ping! Did you see my note above? up☝️

[danielbridge]

Having the same issue with justification on many different platforms. Please help as I love this template and how easy it makes everything!

[danielbridge]

👆the responsive version

[TedGoas]

@danielbridge Does this happen with the original source code found in this repo? If so, can you post a screenshot?

[danielbridge]

[danielbridge]

[danielbridge]

[danielbridge]

This is all just the original code pasted into a blank page on WordPress and viewed on Moto z3 using chrome.

[TedGoas]

pasted into a blank page on WordPress

I'm confused. This bug reported some odd behavior in mobile-view on Android Gmail. How does Wordpress figure in?

[danielbridge]

Its a link to the "view in as a webpage" sorry may be a separate issue and would require a separate thread. Is this code not supposed to be viewed outside of an email client? I was maybe confused by that wording as I assumed it would be able to be used as a standalone. Basically just put a link to the html doc onto my website via wordpress as a link to the "view as a webpage" text. Please help I really admire and papreciate your work as it makes complicated things easier for people like me thanks!

[TedGoas]

Yeah I think that's a separate issue. The code can be viewed outside an email client, though I'm not sure how Wordpress (or whoever) is creating the view in as a webpage page.

[TedGoas]

I'm still unable to reproduce the original bug reported in this issue. Closing this for now, but please reopen if you still see the issue and can provide steps to reproduce. ✌️