High Resolution Layout Issue
Closed this issue · 10 comments
Description
On high resolutions, the layout of the sponsor section overlaps the line art.
Expected behaviour
layout should leave sufficient spacing at all resolutions.
Screenshots
To Reproduce
Use on any sufficiently high resolution monitor. I am using 4K but problem continues at simulated 5K resolutions.
Devices Affected
-macOS Chrome
-macOS Safari
I don't think it's a high resolution monitor issue. There's something weird going on after the motif where anything below gets a bit cutoff, for me at least. We talked about it a bit in #58.
It affects high resolutions cuz the SVG just scales up but then takes up an obnoxious amount of height.
An alternative solution would be to have multiple versions of the SVG so that we use a shorter one on higher res. cc @ailishm
@erickzhao @ailishm follow up on this.
Erick: What would be your proposed specs for another variant of the image?
@krubenok If we make another version with the houses smaller, it would take up way less vertical height. It's not a big change, just making the lines longer relative to the size of the apartments.
@erickzhao Maybe we can set it on larger screens to have a larger padding-bottom? I can try to play around with it but might be jank.
@krubenok can you check what browsers the issue is present in? I tried hella zooming out in Chrome and couldn't replicate.
@loreina IIRC it was Chrome and Safari on my display at home. Zooming out isn't quite the same as a higher res display so I can't replicate it on my laptop either. As soon as I get home I'll try to lend more detail.
@loreina I think larger padding is not the optimal fix because in the first place the graphic is way oversized at 4k scale
we can do both tho
@krubenok send screenshots pls
@erickzhao It just seems weird to replace the graphic when the screen is larger. Maybe there's some way to measure the white space beneath the divider line that the svg is still taking up
@loreina replacing assets for different media queries is a fairly common pattern
e.g. https://cdn-images-1.medium.com/max/2000/1*5SzojYwz0QGQF614iNNBmg.gif
@erickzhao yo that's pretty cool, I'm game. I guess we would have to add though to make it longer