Quiero agregar un elemento de título debajo de mi galería de imágenes creada con PhotoSwipe. Pero mi elemento de título no se pega debajo de la imagen. Se pega demasiado rápido en la imagen cuando el navegador cambia la escala verticalmente.

JS para crear el Elemento:

 lightbox.pswp.ui.registerElement({ name: 'werkInformationen', className: 'smallWerkInformationen', appendTo: 'wrapper', onInit: (el, pswp) => { var wrapDiv = document.createElement('div'); wrapDiv.className = 'wrapDiv'; var popUp = document.createElement('div'); popUp.className = 'popUpWerkInformationenTitle'; popUp.id = 'popUpWerkInformationenTitle'; var span = document.createElement('span'); span.className = 'child'; span.id = 'popUpWerkInformationenTitleSpan'; wrapDiv.appendChild(popUp); popUp.appendChild(span); el.appendChild(wrapDiv); pswp.on('change', (a,) => { var paramsFromCurrentWerk = new URLSearchParams(lightbox.pswp.currSlide["data"]["src"]); document.getElementById("popUpWerkInformationenTitleSpan").innerHTML = paramsFromCurrentWerk.get('id') + " | " + paramsFromCurrentWerk.get('werkName') + " | " + paramsFromCurrentWerk.get('material') + " | " + paramsFromCurrentWerk.get('kuenstler'); }); } });

Salida a HTML:

 <div class="smallWerkInformationen pswp__hide-on-close"> <div class="wrapDiv"> <div class="popUpWerkInformationenTitle"> <span class="child">PLACEHOLDER TEXT</span> </div> </div> </div>

CSS:

 .wrapDiv { min-width: 600px; } .smallWerkInformationen { position: relative; } #popUpWerkInformationenTitle { font-size: 12px; position: fixed; bottom: 0; width: 100%; text-align: center; margin-bottom: 30px; } #popUpWerkInformationenTitleSpan { text-align: center; background-color: black; color: #fff; border-radius: 5px; margin-left: 15px; margin-right: 15px; margin-top: 15px; font-size: 1rem !important; padding: 5px; }

Resultado esperado hasta que no haya espacio: Resultado esperado hasta que no haya espacio

Mi resultado:
Hay suficiente espacio para que quepa el elemento de texto a continuación, pero va en la imagen.

mi resultado