X3Photo Gallery Forums

Dane · Yesterday, 18:04

Hello,

I just tried, as a test, to use CSS to add a feature that displays images embedded within articles wider than the text blocks. Here's an example with the first image: https://www.linsenschuss.de/galerie/ast ... chennebel/

I added the following CSS for this:

/* =========================================================
   WIDE IMAGES INSIDE ARTICLES
   ========================================================= */


/* X3 containers containing wide images must not clip them */
body *:has(.bild-breit),
body *:has(.bild-full) {
    overflow: visible !important;
}


/* Wide article image */
.bild-breit {
    width: min(1400px, calc(100vw - 48px));
    max-width: none;

    margin-top: 2.5rem;
    margin-bottom: 2.5rem;

    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.bild-breit img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}


/* Nearly full-width article image */
.bild-full {
    width: calc(100vw - 48px);
    max-width: none;

    margin-top: 3rem;
    margin-bottom: 3rem;

    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.bild-full img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}


/* Smartphone */
@media screen and (max-width: 767px) {

    .bild-breit,
    .bild-full {
        width: calc(100vw - 30px);
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

}

And then I use that to insert the images into the editor:

<div class="bild-breit">
<a href="{{path}}LDN1082.jpg" data-popup><img src="{{path}}LDN1082.jpg" alt="" /></a>
</div>

However, a red X appears in the Custom CSS field here, even though it works.

: 2026-09-01 00_02_04-DeepL.jpg (14.93 KiB) Viewed 28 times

I'd like to ask what the potential problem might be here, and whether this solution makes sense at all and won't cause any problems in the long run.

Thanks for any support!

Yesterday, 23:48

That's a perfectly fine solution, often used by other web developers!

Dane wrote: However, a red X appears in the Custom CSS field here, even though it works.

Looks like the CodeMirror validator doesn't support modern `:has()` selector, in which case it marks the line as invalid. The CSS is perfectly valid, so nothing to worry about.

Dane · Today, 02:37

Thanks, Karl, for the feedback and for confirming that the approach is technically sound. That’s reassuring to know.

Good to know that the red X is simply caused by the CodeMirror validator not supporting the modern :has() selector properly, and that the CSS itself is perfectly valid.

Thanks again for taking the time to check it.

X3Photo Gallery Forums

Wider Images in the Article3 posts

Wider Images in the Article

Re: Wider Images in the Article

Re: Wider Images in the Article