Help needed for a "magazine style" page

Hi,

The content of the section will get cut off if you set it to have a height of 200px.

Test it with this css code.

#red_section {
    height: 200px;
    overflow: hidden;
}

Best regards,
Ismael

Hi,

I’m just trying to tell you that you can’t set the height to 200px because the content will get cut off. How do you want those sections to look? Please provide a mockup.

Best regards,
Ismael

Hi,

Thanks for the update.

The css code is not supposed to work. I just put it there to show you how setting a specific height would affect the sections.
Can you be more specific? There’s a lot of results in that search and I’m not really sure which design you’re trying to emulate.

If you want the following design (see private field), try the masonry element. Set the “Size Settings” to “Perfect Manual Masonry” so that you can control the size and orientation of the images using post tags.

Perfect Manual Masonry: Manually control the height and width of entries by adding either a “landscape” or “portrait” tag when creating the entry. Elements with no such tag use a fixed default size, elements with both tags will display extra large

Best regards,
Ismael

Hi,

Thanks for the update.

I think the first example would work. Add these css code to limit the height of the slider and remove the before the masonry element.

#blue_section .flex_column .avia-slideshow {
    max-height: 330px;
}

#blue_section .av-flex-placeholder {
    width: 0%;
}

Best regards,
Ismael

Hi,

Use this additional script to adjust the height of the slider based on the height of the masonry element, on browser resize. Put it on the functions.php file.

add_action('wp_footer', 'ava_resize_blue_slider', 9999);
function ava_resize_blue_slider() {
    ?>
    <script>
        $(document).ready(function () {
            function resizeSlider() {
                var slider = $('#blue_section .flex_column .avia-slideshow');
                var next = $('#blue_section .flex_column .av-masonry');
                
                setTimeout( function() {
                    slider.animate({'height':next.height()}, 100);
                }, 700)	
            }
            
            $(window).on('debouncedresize', resizeSlider );
	    });
    </script>
    <?php
}

Best regards,
Ismael