Computing desk
< October 17	<< Sep \| October \| Nov >>	Current desk >

Welcome to the Wikipedia Computing Reference Desk Archives
The page you are currently viewing is a transcluded archive page. While you can leave answers for any questions shown below, please ask new questions on one of the current reference desk pages.

October 18

Wikipedia CSS help

Hello!

Can someone help me understand why the image in this template is overflowing outside its container? It renders correctly on the mainpage (w:sq:Faqja kryesore).

The image is coming from this page.

Any way to make sure none of the images overflow their container there no matter their dimensions? This is where the weekly featured article is set up so the images can be of various types. - Klein Muçi (talk) 21:28, 18 October 2023 (UTC)[reply]

Not yet answering but the object with id="mp-content-text" has correct dimensions containing the image, but the object with class="mp-card-inner" is too small. And that is probably because object id= mp-card-featuring is too small. And the size of that seems to come from the paragraph and button size.

https://sq.wikipedia.org/wiki/Wikipedia:Artikulli_i_jav%C3%ABs/2023/42 has the same issue with mw-parser-output, with spillover of the image outside that div. template:FAJ sets the width but not height of the image.

I expect sq:Stampa:Clear before the noinclude will allow the image to be inside the div. Graeme Bartlett (talk) 23:44, 18 October 2023 (UTC)[reply]

Graeme Bartlett, thank you for your time! You mean adding a clear:both at the bottom of sq:Stampa:Artikulli i javës? I tried that just now, with CSS styling and the template you mentioned, but nothing changed. :/ — Klein Muçi (talk) 00:09, 19 October 2023 (UTC)[reply]

I don't see spillover, but the size of the image leaves little room for the text to flow around it. If, on page sq:Wikipedia:Artikulli_i_javës/2023/42, you replace

{{FAJ|Ismail Kadare 1.jpg}}

by

[[Skeda:Ismail Kadare 1.jpg|frameless|right|100px]]

I expect it will look better on the mainpage. --Lambiam 07:56, 19 October 2023 (UTC)[reply]

Lambiam, that's most likely because you're watching it from a mobile device from which, not sure why, but neither do I see any spillover. The problem still persists when watching it from my desktop though. — Klein Muçi (talk) 08:53, 19 October 2023 (UTC)[reply]

I was watching it from a laptop. Both sq:Stampa:Artikulli i javës and sq:Wikipedia:Artikulli i javës/2023/42 look fine to me. Nothing looks as if it is outside of its boundaries. The corresponding block on sq:Faqja kryesore is a bit of an eyesore. --Lambiam 10:40, 19 October 2023 (UTC)[reply]

Trying a different browser, Safari instead of Mozilla, I now see a problem with the rendering of the template. The simplest explanation is that it is a bug in the implementation of Safari's rendering engine. --Lambiam 10:45, 19 October 2023 (UTC)[reply]

Lambiam, I'm using Chrome and still get the same results. Well, not now because I fixed it but... Apparently Mozilla was better in this aspect? — Klein Muçi (talk) 11:53, 19 October 2023 (UTC)[reply]

I viewed these pages through browsers on macOS, which I believe uses the same rendering engine for Mozilla (Firefox) and Chrome. --Lambiam 21:00, 19 October 2023 (UTC)[reply]

The mp-content-card on sq has a :after statement, which applies the clear fix. A technique to clear floating content inside the container, so that it doesn't overflow. —TheDJ (talk • contribs) 09:52, 19 October 2023 (UTC)[reply]

Thank you! After TheDJ's explanation I was able to replicate the same thing in the template and solve the problem with this edit. As suggested in the first comment by Graeme Bartlett, a simple clear fix was all there was needed. I was just failing to implement it before because I was adding it outside the mp-card-body container. — Klein Muçi (talk) 11:51, 19 October 2023 (UTC)[reply]