Foundation.mozilla.org: Hero image isn't scaling

[kristinashu]

Related to https://github.com/mozilla/foundation.mozilla.org/issues/2261

@Pomax can you please recap what you think the problem here is?

Desktop looks good:

But mobile is cut off:

[alanmoo]

It seems like this is a template issue, where a different version of the image is being fetched for mobile.

[mmmavis]

@kristinashu how should the banner image look like on mobile? Full width with no left/right margin?

[kristinashu]

Right, it should be full width with no side margin.

[kristinashu]

So the same margin as we have on the live site, just without cropping the image:

[mmmavis]

Thanks!

@youriwims refer to the comp above ^ for now. We will get you set up with Abstract and Sketch tomorrow.

[youriwims]

Thanks for the image @mmmavis & @kristinashu—I was able to fix it.

[kristinashu]

Oooh is this ticket possibly related to this one #1485?? Is #1485 still relevant?

[youriwims]

Yes, it's definitely related. For this image, I'm fixing the scaling/cropping issue, consolidating the code, and using best practice responsiveness.

[youriwims]

This has been fixed. See #2425 & #2632.