Remove Space on Justified Gallery for Mobile

  • Resolved oscash

    (@oscash)


    9 months ago

    Very close to solving the mobile display issue with a justified gallery!

    @media only screen and (max-width: 767px) {
.foogallery .fg-item .fg-item-inner {
     width: 50% !important;
     height: 50% !important;
     max-width: 50% !important;
     max-height: 50% !important;
 }
}

    Using this custom css, the images and captions now display smaller once the screen size is less than 767px.

    The final part of the problem that I can’t solve is removing all the empty white space around the images. See a screenshot here. Using the inspect tool, it appears that the blank space is being created through another series of classes; see here. I can’t seem to solve the blank space issue when I try to target fg-type-image and/or fg-positioned and/or fg-loaded.

    Any suggestions on how to close the gap? Thanks!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support elviiso

    (@elviiso)

    Hi @oscash

    Could you kindly explain/describe to us what exactly the mobile display issue you mentioned you are experiencing when using the Justified Gallery template for your galleries so that we can have a full understanding of it and effectively assist you with this? Analyzing your gallery, I can see that it is using the Justified Gallery template and is displayed as expected when the screen width is less than 767px as shown in this linked image: https://prnt.sc/1DaSvEPIZlUg

    Thanks.

    Regards,
    Elvis

    Thread Starter oscash

    (@oscash)

    Hello @elviiso,

    I removed the css after days of being unable to fix it because I couldn’t leave the gallery looking like that for everyone browsing on their mobile devices. I’ve put it back and cleared the cache. You’ll see now how it looks as described in the original post: https://prnt.sc/J_Q4H8igVM1z

    Looking to remove the white space but unable to target these classes that seemingly affect that space: https://prnt.sc/MmfrKh0UKKuc

    Plugin Author steveush

    (@steveush)

    Hi @oscash,

    The Justified template uses JavaScript to perform it’s layout and items are positioned absolutely within the gallery container. Unfortunately this means you can not change the layout through CSS alone.

    If you use the developer tools and inspect one of the gallery items you’ll see that the JavaScript applies an inline style with the position, width and height properties to the div.fg-item elements. These act as the container for each item and position it within the gallery. Your custom CSS only targets the figure.fg-item-inner element, so essentially you’re setting the item inner and thumbnail to use only 50% of the item’s height and width without changing the item’s actual dimensions and position, hence the large gaps that appear.

    To achieve what you are wanting would require JavaScript customizations that fall outside of our free support. Unfortunately I have not created this sort of customization in the past, otherwise I would simply forward it onto to you to use.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Remove Space on Justified Gallery for Mobile’ is closed to new replies.