I am trying to add this code to customize my lightbox when and image opens up -
/* Ensure the lightbox image fits within the lightbox and maintains aspect ratio */ .w-lightbox-image { max-width: 250vh; height: auto; } /* Ensure the lightbox content is scrollable */ .w-lightbox-content { max-height: auto; overflow-y: auto; } /* Specifically target the open lightbox to ensure styles are applied correctly */ .w-lightbox-open .w-lightbox-content { max-height: auto; overflow-y: auto; } .w-lightbox-open .w-lightbox-image { max-width: auto; height: auto; }But even with this, there’s an issue with the image height and the HTML is override when I check it in the inspection of the website. It shows like -
/* Ensure the lightbox image fits within the lightbox and maintains aspect ratio */
.w-lightbox-image {
max-width: 250vh;
height: auto;
}
/* Ensure the lightbox content is scrollable */
.w-lightbox-content {
max-height: auto;
overflow-y: auto;
}
/* Specifically target the open lightbox to ensure styles are applied correctly */
.w-lightbox-open .w-lightbox-content {
max-height: auto;
overflow-y: auto;
}
.w-lightbox-open .w-lightbox-image {
max-width: auto;
height: auto;
}
can you please help me out with this?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)