Box doesn't go full width on mobile gmail

[leggomuhgreggo]

Hey looks like gmail mobile isn't setting box elements to be the full width of their container. My workaround was to set a parent box element that included an image at 600px, but it's a bit clumsy. Thoughts?

Thanks!

(also apologies for the huge images)

[leggomuhgreggo]

Looks like this also causes columns to shrink when not fluid on mobile, too.

Found this thread on the subject.

Any chance of a hotfix with the min-width style? Thanks!

[leggomuhgreggo]

Looks like they same issue is happening with td width too. Even though there's a width attribute defined, gmail isn't respecting it unless min-width is also set.

Any reason not to define a min-width style property in every instance where width is set?

[rolficak]

Gmail has been the hated email client for responsive email coders for a long-long time. We have just published an article that might be helpful. http://edmdesigner.com/blog/tips-to-make-your-responsive-email-templates-look-good-on-gmail-or-inbox-app

Note: we don't support Gmail App, but with the mentioned techniques it should work well. http://edmdesigner.com/compatibility

[leggomuhgreggo]

@rolficak Thanks for the response!

I agree about the gmail mobile app being garbage. That said it has a pretty significant market share. What are your thoughts on adding min-width even if it doesn't amount to full support?

[rolficak]

@ughoo Can you please react to this tip?

[ughoo]

@leggomuhgreggo we apply min-width on wrappers which needed to be on 100% width, but not all the items can apply this, because if your design has fixed width elements in your design, and it applies a 100% min-width, that will ruin the desktop version.... But your question is right, sometimes, in some cases still the best way to fix width issues...

[ughoo]

@leggomuhgreggo in your case, there is a better approach: put the image above in to the box of the "2016 April", so the image inside will keep the box on 100% width, so while the image keep the box on 100%, the 2016 april will align center again properly.

[leggomuhgreggo]

Hey @ughoo thanks for the response. That's definitely what I did, but it doesn't seem to center the text. I'd like to clarify the min-width proposal. Meant to suggest min-width: contextualWidthValue. It wouldnt always be 100%; for fixed width things this would be fixed width. Can that work?

[leggomuhgreggo]

So as a temporary hack, I added a 600px x 1px transparent image to all the boxes. This is obviously a little much to expect of clients every time they add a box, so I'd still advocate some testing on the min-width option to see what comes of it, but at least this stops the bleeding.

Thanks!

[ughoo]

min-width should be 100% or the width fix not works, while the min-width fix px will ok in some cases, but kills natural widths in other cases...because parent elements should behave different..

I understand your point, but i never found stable version based on this approach. We have some researches in progress with positive results so i hope the solution is coming soon!

[leggomuhgreggo]

Interesting. I wonder how min-width: somePixelValue; max-width: 100% interact, where parent natural width might be an issue. I appreciate the consideration and interest in experimenting. Let me know if I can help!

[iamgaborgithub]

Dear Greg,

I’m Gábor from edmdesigner.com. I organize our public Github issues and close this ticket because it looks outdated. If you do not agree with it please leave a comment and I’ll be in touch.

If you have any new issues or feedback to share then please don’t hesitate and open a new ticket or send us an email to support@edmdesigner.com.

I hope you are well.

Best regards, Gábor Kovács Project Manager @ edmdesigner.com