I've used the Adaptable Design view of the Developer tools in Firefox to test this on different screen sizes and I think it works well for screens 600px wide or more, but not for narrower screens. I don't know enough CSS to tweak there.
As discussed on IRC, a proposal would be to change the position of the banner foreground based on the viewport width. So the left part of it no longer overflows on narrow screens due to trying to keep it centered it in its container.
An example to align the image with the left side of the banner container when the screen is 650px or narrower:
@media screen and (max-width: 650px) {
#splash h1 {
background-position-x: left;
}
}
My CSS is a bit rusty, but I think this only override previous rules so should be declared *after* the regular "#splash h1" rules.
Attachment:
OpenPGP_signature
Description: OpenPGP digital signature