@@ -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