Yahoo / AOL App iOS/Android Won't Go Full Width
trlangdon opened this issue · comments
Hello,
First, thank you so much for this template, my rendering has looked so much better already with it!
On my mobile sections, I have them going to full width. Rendering looks flawless everywhere expect for Yahoo & AOL apps on both iOS & Android where the images are not going full width and it looks like all padding is being stripped off....basically it looks like the CSS is being ignored in both of these. Do you happen to know what could be causing this or have any fixes for this? Please let me know if I can provide any additional information to help. My HTML is zipped below.
@trlangdon This is a little difficult to diagnose since you've modified the code and started making it your own.
My theory is the versions of Yahoo & AOL apps you're testing with aren't displaying the media queries. I thought these clients supported the <style> tag and media-queries, but if they don't, it'd make sense that they don't stretch, and any CSS defined in the <head> wouldn't get applied.
Can you reproduce this with the original templates in this repo?
So I worked from "cerberus-hybrid" and modified it to get it where I needed it. I can redo the broken sections in your template and post that. Do you have any best suggestions on how to get my sections to go full width on mobile instead of stacking in the center?
@trlangdon Working from the original templates is always best 👍. Can you provide screenshots of where the template is not displaying as intended? As mentioned, I have a theory it may be occurring in email clients that don't support media queries.
@TedGoas Attaching a screenshot of my iOS Yahoo App test – both Yahoo & AOL are rendering this exact same way. I can tell it's definitely not reading that mobile CSS because I have spacer images showing up that should be hiding and the desktop padding is still there rather than the mobile.
I can definitely redo the HTML, if you just have a recommended way of getting the mobile columns to go full width. I'd rather have it used exactly how you intend it to be so I can avoid altering the code so much.
@trlangdon I'd rather not spend too much time debugging this since this isn't the original Cerberus templates, but in looking at your code I'd investigate anywhere you have a max-width on an image.
For instance, any image that has style="width: 100%; max-width: 300px;" will never grow wider than 300px. Many mobile email viewports are wider than this, so the image won't appear full width.
If you'd rather not limit the widths of email, you might not need to define max-width.
@trlangdon any luck? ☝️
@TedGoas apologies on my delay, due to the project deadline I had to switch to something that I knew would work to get it done for now. I will definitely revisit this soon, I really like the flexibility of this code so I'd like to get this working eventually.
@trlangdon 👍 sounds good.
Since this issue focuses on your adaptation of the templates, and not the original templates in this repo, I'd like to close this issue. I'm happy to keep discussing, though.