Hi Antoine!

El 14/8/21 a las 15:45, Antoine Le Gonidec escribió:
>> 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.
> 
that works, thanks a lot.
I have also removed the left and right margins the foreground image so it's 
well displayed, as you suggested by IRC.

I have uploaded the updated SVG and PNG files to the wiki page, and will create 
a merge request with the changes in CSS so everything is ready for publishing 
when we update the website for Debian 11.

Thanks again!

-- 
Laura Arjona Reina
https://wiki.debian.org/LauraArjona

Reply via email to