Buy me a coffee

Gallery Stacked to 2 Columns

To make the gallery stacked to 2 columns, you can follow these.

#1. First, find the ID of the Gallery.

In my example, we will have:

  • #block-bb9d7bb12e0facfa808e

Gallery Stacked To 2 Columns 01 Min

#2. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('div#block-bb9d7bb12e0facfa808e .image-wrapper').each(function(index) {
  $(this).append($('div#block-bb9d7bb12e0facfa808e .meta').eq(index));
});
});
</script>

Gallery Stacked To 2 Columns 02 Min

#3. Use this code to Custom CSS box

@media screen and (min-width:768px) {
div#block-bb9d7bb12e0facfa808e .sqs-gallery {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 20px 20px;
}}

Gallery Stacked To 2 Columns 03 Min

#4. Result

Gallery Stacked To 2 Columns 04 Min