Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1279027

    Hi
    I use a on pages Gallery, big picture with thumbnails below, Gallery (845×684), and same size for all thumbnails (Portfolio 495×400).

    But even when all pictures have the same size, there are caps/spaces between the thumbnails. Got this problem on different Pages.

    What is here the problem? See for example Link in private content.

    Thanks
    René

    #1279069

    Hi baiker,

    Some of the thumbnails are slightly larger than the others which causes the issue.
    To fix it, try adding this CSS code in Enfold > General Styling > Quick CSS:

    #top #wrap_all .avia-gallery-thumb a {
        height: 82px;
    }

    Hope it helps.

    Best regards,
    Nikko

    #1279076

    Hey Nicco

    That works for Desktop View. On Mobile view, there is now some space between the thumbnail rows. I could live with it, but if there’s a solution…

    René

    • This reply was modified 3 months ago by  baiker.
    • This reply was modified 3 months ago by  baiker.
    #1279216

    Hi René,

    Please try this code with the media query:

    
    @media only screen and (min-width: 1024px) {
    	#top #wrap_all .avia-gallery-thumb a {
    	    height: 82px;
    	}
    }
    
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1279359

    Hi Victoria

    Unfortunately, that doesn’t solve the problem.

    René

    #1279684

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    #1279836

    You can close. Thanks.

    #1279958

    Hi baiker,

    Can you try adding this code at the bottom of functions.php:

    function mygallery_thumbnails(){
    ?>
      <script>
      (function() {
        const thumbnails = document.querySelectorAll('.avia-gallery-thumb a');
        thumbnails.forEach(el => {
            const width = parseFloat(el.getBoundingClientRect().width) * 0.84;
            el.style.height = width + 'px';
        });
      })();
      </script>
    <?php
    }
    add_action('wp_footer', 'mygallery_thumbnails');

    The code will basically get the width of the thumbnails and adjust the height with respect to the width of the thumbnails to remove those extra spaces below.
    Let us know if this helps.

    Best regards,
    Nikko

    #1280087

    Hi Nikko

    Didn’t work. But thanks for trying to help, iit seems, I have to live with it. You may close the thread.

    René

    #1280090

    Hi René,

    We apologize for the inconvenience we’ll be closing this thread then.
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Gallery Thumbnails with caps’ is closed to new replies.