Skip to content

Shrink images / Adding Margins #367

@angellisy

Description

@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 ;)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions