| Message ID | 20260324160528.951575-3-simonparri@ganzeria.com |
|---|---|
| State | New |
| Headers | show |
| Series |
|
| Related | show |
Hi, everyone, Simon Parri <simonparri@ganzeria.com> writes: > The CSS does not set the width of the hero image on the landing > site. As a result, the image takes up a constant amount of space, so > when the viewport is narrower than the image width + text width, the > text is pushed out of the viewport. So make the image only use the > width of its container. > <snip> I’d like to bump this, since the bug still is still present, and it’s quite off-putting when I tell people to read libcamera.org. > I couldn't find a repo for the website, so I made a scratch repo and > had to guess at the layout of the files. I can resend the patch with > adjusted filenames if desired. I’m still willing to send a new patch if the current one doesn’t apply cleanly for whatever reason, or to use a different approach if my current one is unsatisfactory. Regards, -- Simon Parri
diff --git a/_static/css/myrika-libcamera.css b/_static/css/myrika-libcamera.css index bf59154..d73042a 100644 --- a/_static/css/myrika-libcamera.css +++ b/_static/css/myrika-libcamera.css @@ -233,6 +233,18 @@ nav li .current a, nav .active a { display: none; } +/* Give the welcome section more space for the image */ +#welcome { + max-width: 1600px !important; +} + +/* Give the image more space on small screens */ +@media only screen and (max-width: 1200px) and (min-width: 700px) { + #welcome { + padding-left: 0 !important; + } +} + #welcome .hero { display: grid; grid-template-columns: repeat(2, 1fr); @@ -249,6 +261,10 @@ nav li .current a, nav .active a { grid-area: hero; } +#welcome .heroimage img { + width: 100%; +} + /* Hero Text */ #welcome .herotext { grid-area: text;
The CSS does not set the width of the hero image on the landing site. As a result, the image takes up a constant amount of space, so when the viewport is narrower than the image width + text width, the text is pushed out of the viewport. So make the image only use the width of its container. However, simply setting the width of the <img> to 100% makes the image too small compared to the text. So give the welcome section a wider max-width to allow the image more space. Signed-off-by: Simon Parri <simonparri@ganzeria.com> --- Hello everyone, I came across this bug on the libcamera.org landing page. It's reproducible (at least in Firefox) by going into responsive design mode (<C-S-m>) and changing the width to 1200px. In my fix I tried to make sure that the hero image looks reasonably-sized proportional to the "Hi, we're libcamera" text. I also tried to make sure that the text was reasonably right-aligned with the text in the "About" section. I couldn't find a repo for the website, so I made a scratch repo and had to guess at the layout of the files. I can resend the patch with adjusted filenames if desired. _static/css/myrika-libcamera.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) -- 2.51.2