Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

not responsive in Firefox 37.0.1 on OS 10.10.2? #10

Open
frankfarm opened this issue Apr 9, 2015 · 2 comments
Open

not responsive in Firefox 37.0.1 on OS 10.10.2? #10

frankfarm opened this issue Apr 9, 2015 · 2 comments

Comments

@frankfarm
Copy link

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

@frankfarm
Copy link
Author

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.

@lembitk
Copy link

lembitk commented Dec 17, 2015

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…

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants