Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
  • #239146

    Hey there,

    I am putting together a gallery and would like to adjust the spacing between the image thumbnails.. and also remove the white borders.

    gallery customization

    Please let me know if this is a simple solution.

    Thanks so much!


    Hi theworldawaits!

    Please post a link to the gallery. We’ll investigate the source code and provide some custom css code.



    Thanks. The link is currently here: Thanks :)



    Please add following code to Quick CSS in Enfold theme options under Styling tab

    #top div .avia-gallery img { border-style: none; padding: 0; }
    #top #wrap_all .avia-gallery-1 .avia-gallery-thumb a { width: 16%; margin: 20px;  }

    P.S.: Nice website! :)

    Best regards,


    Thanks, it worked great! Really appreciate it.

    One other question: Is it possible to show the Caption in the lightbox?



    It is possible but that would require a heavy customization and unfortunately that’s beyond the scope of the support we can offer. If you really need it try hiring a freelancer for the job or if you prefer request a quote here.



    I have used this to remove the border on the thumbnails but for some reason the border stays on the larger image when you have the gallery set up with big image and thumbnails under?



    Can you post the link to your gallery page please?


    This reply has been marked as private.

    Add this:

    .avia-gallery-big {
        border: 0 !important;



    Worked! Thanks


    You are welcome, glad to help :)



    The CSS provided above does not take the white border off of a gallery with the big image shown above the thumbnails. It only takes the border off of the thumbnails.

    #top div .avia-gallery img { border-style: none; padding: 0; }
    #top #wrap_all .avia-gallery-1 .avia-gallery-thumb a { width: 16%; margin: 20px; }

    .avia-gallery-big { border: 0 !important; }

    Notice the Gallery with Preview and Bigger Gallery with Preview on your demo…

    The above code only removes the border for the thumbnails.

    Any ideas how to remove the border from the big preview? I have tried numerous css combinations and now stuck.




    I tested that code using DevTools and it did remove the border, can you post a link to the page where you’re trying this?



    Anyone found a solution for removing the border on the big image too ?



    @kyzoe Please post the link to your page and point out the border you would like to remove.

    Best regards,


    Can anyone tell me what the code should be for having the standard border and colour as in the Enfold Demo for the Gallery element with big image above and smaller thumbnails below. I want to achieve this again having removed it earlier, so would like to “put back the default” as it were.

    like these – see link



    You probably added a code similar (or the same) to following one

    #top div .avia-gallery .avia-gallery-big {
        border: none;

    Please remove it. If that does not help, please start a new thread and post the link to your page.


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

You must be logged in to reply to this topic.