Responsive Issue

the better way would be over flexbox layout then …

you got before more than 12 columns inside that section with your images – that should be inside a section –
then the next color-section contains your heading – a separator (f.e. in one 1/1 column) and your videos – maybe inside 1/3 columns
see what happens if you place this to your quick css:

#av_section_1 .container {
  max-width: 800px;
  margin: 0 auto !important;
}

#av_section_1 .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 20px
}

#av_section_1 .entry-content-wrapper:before,
#av_section_1 .entry-content-wrapper:after {
  display: none;
}

#av_section_1 .entry-content-wrapper .flex_column {
  flex: 0 1 30%;
  width: unset !important;
  margin: 0;
  padding-bottom: 20px;
}

@media only screen and (max-width: 599px) {
  #av_section_1 .entry-content-wrapper .flex_column {
    flex: 0 1 45%;
  }
}

@media only screen and (max-width: 359px) {
  #av_section_1 .entry-content-wrapper .flex_column {
    flex: 1 1 100%;
  }
}

you can now pull all your columns from your color-section: #section-width with your images to that first color section.

if the auto group setting on : avia-snippet-lightbox.js should not be hampered globally – you can give a custom-Class to a parent element or the element itself ( f.e. a img gallery or masonry or the color-section with your images) e.g: noGroup

Then change the behaviour by child-theme functions.php snippet:

function conditional_disable_lightbox_gallery() {
?>
<script type="text/javascript">
(function($) {
    $(function() {
        setTimeout(function() {
            $('.noGroup a.lightbox-added').each(function() {
                var $link = $(this);
                
                $link.magnificPopup('destroy');
                
                $link.magnificPopup($.extend({}, $.avia_utilities.av_popup, {
                    gallery: { 
                        enabled: false,
                        navigateByImgClick: false
                    }
                }));
            });
        }, 100);
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'conditional_disable_lightbox_gallery', 999);

see: https://webers-testseite.de/image-masonry/

• This reply was modified 2 weeks, 6 days ago by Guenni007.