Icon/Flipbox – Make Image Fill entire FlipBox Space (Headshot)

Hey Eleina,

Thank you for the inquiry.

We may need to inspect the elements in order to understand the issue better. Please provide the login details in the private field so that we can access the site.

Best regards,
Ismael

Hi,
Thanks for the link to your site, I believe setting the height to a specific size like 50vh is not a good approach for all screen sizes, so I disabled your css, it is still there if you want to go back to it, I just commented it out.
I recommend making the height and width equal sizes since your images are practically square, and change the default background size from cover to contain
So I added this css to make your images show full size and not be cropped:

#av_section_3 .avia-icon-grid-container .avia-icongrid-flipbox .avia-icongrid-wrapper .avia-icongrid-front.bg-img:before {
    background-size: contain;
}

Then I added this code to the end of your child theme functions.php file in Appearance ▸ Editor to the height and width equal sizes:

function custom_icongrid_script() { ?>
  <script>
(function($) {
var cw = $('#av_section_3 .avia-icongrid-front').width();
$('#av_section_3 .article-icon-entry').css({'height':cw+'px'});
}(jQuery)); 
</script>
  <?php
}
add_action('wp_footer', 'custom_icongrid_script');

Now at different screen sizes the flip box is square and your images naturally fit as you would expect.
Please note that if you test on a desktop emulating different screen sizes, each time that you change the size you will need to reload the page for the javascript to work, this will cause no issues on real devices because the never change their page loadin size from mobile to tablet suddenly like you are in testing with a desktop browser.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike