Where does the gray background load from when the resolution is reduced?

[kosh2323]

Hi, I'm faced with such a task. I use ordinary *jpg images. And I download them locally from the images/fan/ folder that I created, and the group is also called. Here is the code for inserting one slide

<script> Fancybox.bind('[data-fancybox="fan"]', { Thumbs : { type: "classic" } }); </script>

Everything works, but when the resolution is reduced in the code inspector in Chrome, a gray background appears from somewhere, as if from under the image, I can't even understand why and where it comes from, it spoils the design. Help me understand what needs to be done to remove it completely.

[kosh2323]

The image that I am inserting https://postimg.cc/9z6z3FhM

[fancyapps]

Hi,

For small screen devices, to save space, the caption is placed over the content, you can disable this feature using compact:false option, see this demo - https://jsfiddle.net/fmLdgtc7/

[kosh2323]

Thank you very much, you helped a lot, and success in all your projects!