Hi All,
I'm using this CSS code injection to header but I can't adjust font or positioning of the caption. It crosses over the image at the bottom on desktop and through the bottom 2/3rds on mobile. Any idea how to fix?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
function createNodeCaption(textContent){
var divElement = document.createElement("div");
var pElement = document.createElement("p");
pElement.innerHTML = textContent;
divElement.classList.add("style-gallery-lightbox-text");
divElement.appendChild(pElement);
return divElement;
}
$( document ).ready(function() {
var itemGallery = document.getElementsByClassName('gallery-grid-item');
var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item');
var countGalleryItem = itemGallery.length;
for(var i = 0; i < countGalleryItem; i++){
if(itemGallery[i].getElementsByTagName('p').length != 0){
var text = itemGallery[i].getElementsByTagName('p')[0].textContent;
var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0];
itemNeedCaption.appendChild(createNodeCaption(text));
}
}
});
</script>
<style>
figcaption.gallery-caption.gallery-caption-grid-simple {
display: none;
}
.style-gallery-lightbox-text {
padding: 10px 0px 25px 0px;
display: block;
position: absolute;
left: 50%;
top: 90%;
width: 100%;
transform: translate(-50%, -50%);
font-size: .3em
text-align: center;
}
.style-gallery-lightbox-text p {
width: 90%;
padding: 10px 15px;
margin: auto;
color: gray;
background-color: rgba(0,0,0,0);
}
@media screen and (max-width:767px) {
.style-gallery-lightbox-text {
top: 70%;
}
}
</style>
}
