Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 23, 2015 at 2:24 pm #416372
    stedia

    I have used the following custom css to get the 4 icon boxes at the same height

    #pfy-home-2 .iconbox_content {
min-height: 330px;
}

    This is working until I resize my window on my desktop. Then I see that the background part becomes smaller then the text part and that the boxes are different in size.

    When I change the css to 

    #pfy-home-2 .iconbox_content {
height: 330px;
}

    The sizes remain indeed the same height – but when I resize the window – the text is also getting out of the icon-box.

    How can I enforce same height of the icon-boxes?
    How can I avoid that the text part will be outside the icon-boxes after resizing?

    March 24, 2015 at 7:42 am #416925
    Rikard

    Hi stedia!

    Please try adding the style only to screen sizes above mobile:

    @media only screen and (min-width: 767px) {
#pfy-home-2 .iconbox_content {
min-height: 330px;
height: 330px;
}
}

    Cheers!
    Rikard

    January 21, 2018 at 10:07 pm #900475
    pete4u

    Hi Rikard,

    how to get the same height?
    https://drive.google.com/open?id=1TGg55PAzQie7kowRwI51n8WU21k1nbf-

    ONLINE TERMINBUCHUNG

    Thank you for help!

    Best regards
    Peter

    January 24, 2018 at 4:27 am #901869
    Ismael

    Hi,

    Please add a unique class attribute to the columns containing the iconbox ( ex: custom-column) then use the following script in the functions.php file.

    //add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
	function a() {
        var maxHeight = 0;

        $('.custom-column .iconbox_content').each(function(){
           var thisH = $(this).height();
           if (thisH > maxHeight) { maxHeight = thisH; }
        });

        $('.custom-column .iconbox_content').height(maxHeight);
    }
	
	$(window).on('load debouncedresize', function() {
		a();
	});
})(jQuery);
</script>
<?php
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.