Lightbox images and captions on mobile aren't being displayed properly

Hi everyone.

I’m having trouble with a clients site - specifically the light box on mobile phones

I’ve inserted custom code to try and fix the issue , i found it here on the forum.

My problem is - i cant seem to get the sizing of the images and the captions to properly display.
Its quite hard to explain but say i adjust the padding and image/figure size for one picture, the next one wont look right. Sometimes the captions disappear. Ive tried everything from adjusting padding to font size to the .w-lightbox-view element to the figure element. etc.
Is there a fix that can make sure all elements (all picture and captions) within the lightbox look good.

The custom code i added is obviously in the page settings inside the head tag

The best thing would be for someone to look on a mobile device to see what i mean.

here is my read only link:
https://preview.webflow.com/preview/jordi-marin-gest?utm_medium=preview_link&utm_source=designer&utm_content=jordi-marin-gest&preview=ced9608308a4b51911e9c09dc8cfd9dc&pageId=612cc3a55dc09a127de34d90&workflow=preview

the pages in question are all the galleries but you can just look at this one
https://jordi-marin-gest.webflow.io/jordi-marin-gest-paintings-and-sculpture

Thanks in advance!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)