Shrink images / Adding Margins

[angellisy]

It's not exactly a Feature Request per se (I think) but, after opening the lightbox gallery, how could I shrink the big images a little -or- add margins around them, so they don't touch the top/bottom edges (while keeping the responsiveness, of course)?

By inspecting the code injected, I've found this:

@media (min-width: 769px) {

  .gslide-image img {
    max-height: 97vh;
    max-width: 100%;
 }
}

Changing the max-width to something like 85% would be good enough for me, however, I couldn't shrink the captions' element the same way. I mean, I did manage to shrink it by modifying its selector but, in this example, instead of 85% I had to use 35.9% and, by bad experiences I had in the past, I've learned that fractional percentages are bad for business.

Alternatively, adding a negative margin-top to .gslide-description.description-bottom "shrinks" just the way I need, but I'm not sure if that's the correct way to do it.

I REALLY don't want to recreate all images in smaller dimensions.

Thank you for your time and have a wonderful week ;)

[nickdekruijk]

I would like to accomplish this aswel. I don't like the images touching the browser edges. And also include the titles. Haven't yet figured out a way that works well enough.

[gingerchew]

Hey there @angellisy, any chance you can add a codepen or something similar to your question? It would help in understanding what is going on.

[felixranesberger]

This issue should be related: #323

[stbs01]

@angellisy @nickdekruijk Sorry, did you find a solution? Sorry for disturbing you!