Change size and layout of icon box

Hey mattsalamon,

Thank you for using Enfold.

Are you going to use the actual shortcode of icon box element? You can’t make the text wrap around the icon box if you’re going to insert it using the ALB. It has to be inserted as an actual shortcode inside a text or code block. You may need to turn on the custom css class field so that you can target that specific element directly.

// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael

Hi,

Thanks for the update.

Have you tried changing the class attribute of the image inside the iconbox from “alignnone” to “alignleft”? That should allow the text to wrap around the image.

Best regards,
Ismael

Hi,

Thanks for the update.

You should add the actual iconbox shortcode inside the text block, then turn on the custom css class field so that we can target that specific text block or icon box element directly.

// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

You can generate the iconbox shortcode from a separate post using the shortcode generator.

The content of text block should look something like this once you have included the iconbox shortcode plus the actual content that should wrap around the icon box.

[av_icon_box position='left' icon_style='' boxed='' icon='1' title='IconBox Title' link='' linktarget='' linkelement='' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-29zeuo' custom_class='av_wrap_icon_box']
Icon Box Text
[/av_icon_box] Text block content lorem ipsum dolor sit amet i am so osamu andsamu haha

If you noticed, we added the custom_class parameter to the icon box shortcode and added the value “av_wrap_icon_box”. We can use that class attribute to change the style of the icon box.

#top .iconbox.av_wrap_icon_box {
    width: 50%;
    float: left;
}

Best regards,
Ismael

Hi,

Thanks for the update.

You just changed the class attribute name and adjusted the css code above using that particular class attribute (center_icon_box). If you want to create space between the box and the text, add this css code.

.center_icon_box {
    width: 40% !important;
    float: left !important;
    margin-right: 50px;
}

Best regards,
Ismael

Hi,

Thanks for the update.

You can adjust the width of the iconbox for smaller screens using css media queries.

@media only screen and (max-width: 767px) {
    .center_icon_box {
        width: 100% !important;
        float: none !important;
    }
}

Best regards,
Ismael