X3Photo Gallery Forums

Dane · Today, 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 8 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!

X3Photo Gallery Forums

Wider Images in the Article1 post

Wider Images in the Article