From patchwork Tue Mar 24 16:05:30 2026 Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit X-Patchwork-Submitter: Simon Parri X-Patchwork-Id: 26327 Return-Path: X-Original-To: parsemail@patchwork.libcamera.org Delivered-To: parsemail@patchwork.libcamera.org Received: from lancelot.ideasonboard.com (lancelot.ideasonboard.com [92.243.16.209]) by patchwork.libcamera.org (Postfix) with ESMTPS id 5ADF2BD87C for ; Tue, 24 Mar 2026 16:06:42 +0000 (UTC) Received: from lancelot.ideasonboard.com (localhost [IPv6:::1]) by lancelot.ideasonboard.com (Postfix) with ESMTP id AC64C6279E; Tue, 24 Mar 2026 17:06:41 +0100 (CET) Received: from omta002.uswest2.a.cloudfilter.net (omta002.uswest2.a.cloudfilter.net [35.164.127.225]) by lancelot.ideasonboard.com (Postfix) with ESMTPS id 2D83962791 for ; Tue, 24 Mar 2026 17:06:39 +0100 (CET) Received: from mcc-obgw-5001b.ext.cloudfilter.net ([10.243.65.88]) by cmsmtp with ESMTP id 4zVEwCGuQXqHn54H8wXOO0; Tue, 24 Mar 2026 16:06:38 +0000 Received: from localhost ([173.16.167.196]) by cmsmtp with ESMTPS id 54H7w3JhnnmIA54H8wClkR; Tue, 24 Mar 2026 16:06:38 +0000 X-Authority-Analysis: v=2.4 cv=SNNCVPvH c=1 sm=1 tr=0 ts=69c2b68e a=VPmDnoH/21K0g3l4Zi3lTQ==:117 a=VPmDnoH/21K0g3l4Zi3lTQ==:17 a=YAyIRdgMAAAA:8 a=93cTfXwPAAAA:8 a=0k_abor-NQi6Dy6BUaYA:9 a=o1rO4XtwZBNj6n05oSJ_:22 a=BtoB7OvlJspRKqJ76k_l:22 From: Simon Parri To: libcamera-devel@lists.libcamera.org Cc: Simon Parri Subject: [libcamera.org] [PATCH] Fix hero image pushing text off-screen on the landing page Date: Tue, 24 Mar 2026 11:05:30 -0500 Message-ID: <20260324160528.951575-3-simonparri@ganzeria.com> X-Mailer: git-send-email 2.51.2 MIME-Version: 1.0 X-CMAE-Envelope: MS4xfG8nTDaNeqAo1Fg/0DfcGuhtbjaZMpoBuvLNH/VL0PJlZTPImjOi81MQSLfMO9zLWyQAr9WcUlcI9PJgM5toMW9HbRMRwFfrwOBfxkp5ww7OFAqh4mGi vaj1eJcLcXBtRnHeS4yzSDPdm5AhJ6MplqcVbJ0LmKTmlgi9n2XwmqCiaT4qT8whpD/BSvLwVNPTgYKGb/AfF3y2sPTAeako3ldT5ir9bsE80WFGlB9KXWIc GP8mEfokJaDOkUuhrHNukw== X-BeenThere: libcamera-devel@lists.libcamera.org X-Mailman-Version: 2.1.29 Precedence: list List-Id: List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: libcamera-devel-bounces@lists.libcamera.org Sender: "libcamera-devel" 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 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 --- 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 () 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 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;