zerobase-io / smart-tracing

Privacy-First Contact Tracing to Keep Communities Safe
https://zerobase.io
Apache License 2.0
27 stars 13 forks source link

Header images get cut awkwardly #242

Open aronszanto opened 4 years ago

aronszanto commented 4 years ago

Stock images ok for now, but maybe there's a way to make it's not just a floating head or some such

JohnCLo commented 4 years ago

Originally the images were center aligned, @alh2202 mentioned they looked strange cutting off the heads so we made the image top aligned to keep the heads. The main issue is with browser responsiveness (needs to look good on mobile and desktop, preferably mobile- one is inherently horizontal and the other is vertical). Just need to find the right image that works on mobile and desktop.

Here's an example - if you find a really wide image for desktop that perfectly keeps all the image elements without vertically cropping them, it will look really small (narrow) on mobile, unless you center and then cut off the sides - but then you'd need to make sure that the main image elements are in the center (which makes the desktop image look dumb anyways).

Trying to avoid the "load different images for different breakpoints" solution for now. Its a nice to have feature in backlog