Vertically not aligned, with missing bottom gap

  • Hi,

    I use PhotoSwipe Lightbox without showing caption or anything else below the images.
    In that case, there is no gap between the image and the bottom edge of the browser.

    To solve this, I added this CSS code, but anyway with this trick the image is nevertheless not vertically centered, the gap at the top is bigger than the gap at the bottom.

    .pswp__img {
    transform: scale(0.95);
}

    Is there any possibility to get a 100% image centered in the frame with equal gap up and down ?

    Thanks you for the support.

    Regards,

    Xavier

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    I can’t reproduce this case. Even without any caption there is a margin around the image and the image is centered as well:

    See here: https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/#&gid=1&pid=9

    Or the last image titled “Image without any caption” on https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/

    Do you have a website where I can see the issue?

    Edit: if you enable the backend option “Full picture size in desktop view” there will be no border – maybe you enabled that?

    • This reply was modified 4 years, 7 months ago by Arno Welzel.
    Thread Starter artpictoris

    (@artpictoris)

    Yes indeed, it seems to work perfectly on your side ??

    I have just opened my website: https://xavierfanuel.com

    Go to “Featured” menu item, or any other items under galleries…

    Thank you Arno.

    Plugin Author Arno Welzel

    (@awelzel)

    I see the problem. However I don’t know how to fix it, since I’ve never seen this on any other website – sorry!

    This CSS hack seems to work, but I still don’t know why the original problem exists:

    .pswp__img {
  margin-top:-22px;
  padding-top:22px;
  padding-bottom:22px;
}

    The value 22px is half of the height of the top bar. But feel free to play around with different values. Just keep in mind, that the value must be identical for all three parameters and margin-top needs to be negative.

    It looks like the image is scaled by some other script or CSS rule so it becomes too big and therefore out of center as well since PhotoSwipe assumes a specific calculated images size. But analyzing this up to the real root cause is out of scope of a free support, sorry.

    Thread Starter artpictoris

    (@artpictoris)

    That is ok Arno, I will go with this and manage to get something running correctly.
    But it is a fact, I do not like coding absolute px value in the CSS, obviously.
    Thank you for the time passed on this.

    By the way, I had a look on the photoswipe.com
    How can we get a licence to get full support on tricky problems ?

    Regards,

    Xavier

    Plugin Author Arno Welzel

    (@awelzel)

    There is no “license” to get support. Photoswipe is completely open source and free software. Also see here:

    https://github.com/dimsemenov/PhotoSwipe/blob/master/README.md

    Also my version of PhotoSwipe is already modified in a number of ways (see https://www.ads-software.com/plugins/lightbox-photoswipe/#local%20changes%20in%20photoswipe), so the original author won’t provide any support anyway.

    Plugin Author Arno Welzel

    (@awelzel)

    In addition: there is no “absolute px” any longer. “px” is just a logical unit like “em” and not a real “pixel”. The real size is calculcated by the browser depending on the DPI value of the device (the value which is reported by window.devicePixelRatio to be precise).

    So it makes no difference if you say “16px” or “1em” – the size is exactly identical. And having relative sizes for navigational elements like “5%” makes no sense since you never know how big the viewport is and if 5% will be enough or too much on a specific device.

    • This reply was modified 4 years, 7 months ago by Arno Welzel.
    Thread Starter artpictoris

    (@artpictoris)

    Thank you for the last explanations, I have learnt something today ?? Really I didn’t know.

    And for the problem itself, ok I understand, the problem resides in the core photoswipe module I guess.

    Sorry for the inconvenient anyway, my last remark starts because you mentioned “out of scope of a free support”.

    I will live with the hack, no problem with this.

    Thank you Arno, and take care.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Vertically not aligned, with missing bottom gap’ is closed to new replies.