rodriguezcommaj/salted

not responsive in Firefox 37.0.1 on OS 10.10.2?

Opened this issue · 2 comments

Jason, thank you for providing this template. It works well for me except in Firefox. The example file salted-responsive-email-template.html does not appear to be responsive in Firefox 37.0.1 on OS 10.10.2. The problem seems to be that the larger images won't shrink as the browser width shrinks, and it's not immediately clear to me why or how to resolve it.

This problem does not occur in Chrome 41.0.2272.118 or Safari 8.0.3 or Opera 27.0.1689.54.

salted example in firefox 37 0 1 on os 10 10 2

I added width: 100% !important; to img[class="img-max"] (line 68) and this seemed to resolve the problem for me without causing problems in the aforementioned versions of Chrome, Safari, or Opera on OS 10.10.2.

The fix suggested by @frankfarm might be a welcome addition, as the images with the class "img-max" won't shrink indeed along with the viewport/window in Gecko (Firefox, Thunderbird). More specifically, the problem is with the first 2 images which have their width of 500px defined in both tag attribute and inline CSS property. Btw, as a Gecko-only thing, it could be added with the nifty Gecko-only media query, as suggested in this excellent article by @KEVINgotbounce:

@-moz-document url-prefix() { /* target Gecko (Firefox, Thunderbird) */
  img[class="img-max"] {
    width: 100% !important;
  }
}

However, it should be noted though that forcing all "img-max" images to occupy 100% of width available to them will also "pump up" the 4 images within the two column section – rendering them less or more blurry, as they go up from width of 240px to => up to 446px (at the viewport/window width of 525px, the width of Salted's "mobile" media query).

PS. Another, and possibly more troubling issue in my current Thunderbird testing: the two column section won't re-stack to => one column on viewport/window width 525px and below… As the job at hand doesn't require a two column block, I might have to postpone investigating this, but at least I'll have a reminder within this comment…