Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 23, 2024 at 4:20 pm #1467680
    Qgrafica_7

    Hi,
    could you please tell me how to increase the size of the icon in the icon boxes? Page link in the private content.
    Thanks

    September 23, 2024 at 8:31 pm #1467693
    Rikard

    Hey Qgrafica_7,

    Please try the following in Quick CSS under Enfold->General Styling:

    .iconlist_icon .iconlist-char:before {
  font-size: 60px;
}

    Best regards,
    Rikard

    September 24, 2024 at 11:43 am #1467737
    Qgrafica_7

    this CSS code applies changes to the icon list, but what i need is about the icon box element, you can see more clearly what i’m talking about in this screenshot (in private content)

    September 24, 2024 at 4:22 pm #1467742
    Rikard

    Hi,

    Please try this CSS instead:

    .iconbox_icon:before {
  font-size: 40px;
  position: absolute;
  left: 20%;
}

iconbox_icon {
  top: -33px;
}

    Best regards,
    Rikard

    September 24, 2024 at 9:56 pm #1467769
    Qgrafica_7

    Thank you, the code works but the first icon on the left is not aligned to the center, why so?

    Another question: i want the icon boxex to be equal hights, i already tried what is shown in the documentation but it does’nt work (i set equal height from the column row settings but it shows 3 columns with different heights).
    From the Enfold Documentation: “To create equal height Icon Box elements. First, add your Icon Box elements inside the columns and set the background color to the column element as required. Lastly, open the edit options of the first column element and select “Equal Height” from the column row settings.”

    Thank you very much.

    September 25, 2024 at 5:57 am #1467773
    Ismael

    Hi,

    Thank you for the update.

    When you set the columns in a row to have equal height, it will only affect the columns themselves, not the elements within them. To ensure icon boxes have the same height, apply the class name “av-icon-box-same-height” in the Advanced > Developer Settings > Custom CSS Class field, and then add this script to the functions.php file.

    function ava_custom_script_here()
{
    ?>
    <script>
        (function ($)
        {
            function setEqualHeight() {
                var maxHeight = 0;
                $('.av-icon-box-same-height .iconbox_content').css('height', 'auto');
                
                $('.av-icon-box-same-height .iconbox_content').each(function () {
                    var contentHeight = $(this).outerHeight();
                    if (contentHeight > maxHeight) {
                        maxHeight = contentHeight;
                    }
                });
                
                $('.av-icon-box-same-height .iconbox_content').css('height', maxHeight + 'px');
            }

            document.addEventListener('DOMContentLoaded', function () {
                setEqualHeight();
                $(window).on('resize', function () {
                    setEqualHeight();
                });
            });
        })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_script_here');

    Best regards,
    Ismael

    September 26, 2024 at 8:41 pm #1467893
    Qgrafica_7

    Thank you very much, i did as you suggested and now the columns are all the same height.
    I still have the first icon on the left which is not aligned to the center, why so?
    Please see the screenshot in the private content.
    Thanks

    September 27, 2024 at 1:34 am #1467903
    Ismael

    Hi,

    Thank you for the update.

    The screenshot is not available. Please try to use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. To adjust the position of the first icon, try to use this css code:

    .page-id-2812 .iconbox.iconbox_top.av-4y8t98-1552b52871c4cfcb5f7a7b4dfc77e4b5 .iconbox_icon:before {
    left: 8px;
}

    Best regards,
    Ismael

    October 28, 2024 at 9:31 pm #1470042
    Qgrafica_7

    Hi Ismael,
    i used the code you sent me and since it didn’t work, i looked a bit more in the page inspection, i ended up using this CSS which worked! Apparently the code you sent me to target this particular icon was wrong and i needed to look up the correct one

    .page-id-2812 .iconbox.av-4y8t98-56fce2202dcad175ce5471fdcc158497 .iconbox_icon:before {
    left: 14%;
}

    Thank you for your help

    October 29, 2024 at 7:40 am #1470067
    Ismael

    Hi,

    Great! Glad to hear you figured this out. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘icon box size’ is closed to new replies.