Standard Left Uncontained Icon Box – not working

[Amber Needler]

Hi,

I am wanting some icon boxes the same way as shown on the demo, with the icon / image on the left. I am using the same setting, I’m assuming… But they aren’t displaying properly.

Screen shots attached.

Thanks,

Amber

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

What version of the theme do you have?

What version of the Swift Framework plugin do you have?

Please add a WP login for us to take a closer look.

Thanks.

[Amber Needler]

Hi,

It’s the latest version of both the theme/plugin and WordPress. I can’t give login details as I’m working locally.

Thanks,

Amber

[David Martin – Support]

Hi,

Please test this:

.sf-icon-box.sf-icon-box-standard-left .sf-icon[class^="fa-"] {
    float: left;
    margin-right: 10px;
}
.sf-icon-box-standard-left .sf-icon-box-content {
    margin-top: -15px;
}

– David.

[Amber Needler]

Hi,

This didn’t work.

Thanks,

Amber

[David Martin – Support]

Amber please post here your shortcodes you are using.

Thanks.

[Amber Needler]

Hi,

Do you mean any custom CSS? I’m not using any Swift shortcodes.

Thanks,

Amber

[David Martin – Support]

No, the shortcodes. Click Use Default Editor, then click the “Text” tab and copy out the shortcodes generated from the Page Builder.

Thanks.

[Amber Needler]

Hi,

Oh,my apologies!

[spb_row element_name=”Row” wrap_type=”content-width” parallax_image_height=”content-height” parallax_image_movement=”fixed” parallax_image_speed=”0.5″ bg_video_loop=”yes” parallax_video_height=”window-height” parallax_video_overlay=”none” row_overlay_opacity=”0″ row_margin_vertical=”30″ vertical_center=”true” width=”1/1″ el_position=”first last”] [spb_text_block animation=”none” animation_delay=”0″ simplified_controls=”yes” custom_css_percentage=”yes” padding_vertical=”5″ padding_horizontal=”0″ margin_vertical=”0″ custom_css=”margin-top: 0%;margin-bottom: 0%;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 5%;padding-left: 0%;padding-right: 0%;padding-bottom: 5%;” border_size=”0″ border_styling_global=”default” width=”2/3″ el_position=”first last”]

Elements Hull (formally KS Sport Therapy) is a mobile and clinic based sports injury and remedial massage service providing treatments and rehabilitation at a place of your convenience in Hull and the surrounding areas.

[sf_button colour=”accent” type=”bordered” size=”standard” link=”http://localhost:8888/git/elements/about” target=”_self” icon=”sf-icon-read-more” dropshadow=”no” rounded=”yes” extraclass=””]More about us[/sf_button]

[/spb_text_block] [/spb_row] [spb_swift_slider fullscreen=”false” maxheight=”700″ slidecount=”5″ category=”home” transition=”slide” loop=”true” nav=”true” pagination=”true” continue=”true” fullwidth=”yes” width=”1/1″ el_position=”first last”] [spb_row element_name=”Row” wrap_type=”content-width” row_bg_type=”color” color_row_height=”content-height” bg_type=”cover” parallax_image_height=”content-height” parallax_image_movement=”fixed” parallax_image_speed=”0.5″ bg_video_loop=”yes” parallax_video_height=”window-height” row_top_style=”none” row_bottom_style=”none” parallax_video_overlay=”none” row_overlay_opacity=”0″ row_padding_vertical=”0″ row_padding_horizontal=”0″ row_margin_vertical=”0″ remove_element_spacing=”no” vertical_center=”true” inner_column_height=”col-natural” row_expanding=”no” row_animation=”none” row_animation_delay=”0″ minimize_row=”no” simplified_controls=”yes” custom_css_percentage=”no” custom_css=”margin-top: 0px;margin-bottom: 0px;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 0px;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;” border_styling_global=”default” width=”1/1″ el_position=”first last”] [spb_text_block animation=”none” animation_delay=”0″ simplified_controls=”yes” custom_css_percentage=”yes” padding_vertical=”5″ padding_horizontal=”0″ margin_vertical=”0″ custom_css=”margin-top: 0%;margin-bottom: 0%;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 5%;padding-left: 0%;padding-right: 0%;padding-bottom: 5%;” border_size=”0″ border_styling_global=”default” width=”1/1″ el_position=”first last”]

The following conditions plus many more are treated:

[/spb_text_block] [spb_icon_box title=”Sporting Injuries” box_type=”standard-left” box_icon_type=”image” image=”24″ svg_icon=”arrows-color-1_cloud-download-95″ animate_svg=”no” target=”_self” animation=”none” animation_delay=”0″ animated_box_style=”coloured” animated_box_rounded=”yes” width=”1/3″ el_position=”first”]

Lorem ipsum dolor sit amet isse pote nti. Vesquam ante aliquet lacusemper elit. Cras neque nulla, convallis non. commodo et, eui mod nonsese.

[/spb_icon_box] [spb_icon_box title=”Overuse Injuries” box_type=”standard-left” box_icon_type=”image” image=”26″ svg_icon=”arrows-color-1_cloud-download-95″ animate_svg=”no” target=”_self” animation=”none” animation_delay=”0″ animated_box_style=”coloured” animated_box_rounded=”yes” width=”1/3″]

Lorem ipsum dolor sit amet isse pote nti. Vesquam ante aliquet lacusemper elit. Cras neque nulla, convallis non. commodo et, eui mod nonsese.

[/spb_icon_box] [spb_icon_box title=”Chronic Conditions” box_type=”standard-left” box_icon_type=”image” image=”27″ svg_icon=”arrows-color-1_cloud-download-95″ animate_svg=”no” target=”_self” animation=”none” animation_delay=”0″ animated_box_style=”coloured” animated_box_rounded=”yes” width=”1/3″ el_position=”last”]

Lorem ipsum dolor sit amet isse pote nti. Vesquam ante aliquet lacusemper elit. Cras neque nulla, convallis non. commodo et, eui mod nonsese.

[/spb_icon_box] [spb_icon_box title=”Tight & Painful Muscles” box_type=”standard-left” box_icon_type=”image” image=”28″ svg_icon=”arrows-color-1_cloud-download-95″ animate_svg=”no” target=”_self” animation=”none” animation_delay=”0″ animated_box_style=”coloured” animated_box_rounded=”yes” width=”1/3″ el_position=”first”]

Lorem ipsum dolor sit amet isse pote nti. Vesquam ante aliquet lacusemper elit. Cras neque nulla, convallis non. commodo et, eui mod nonsese.

[/spb_icon_box] [spb_icon_box title=”Postural Problems” box_type=”standard-left” box_icon_type=”image” image=”29″ svg_icon=”arrows-color-1_cloud-download-95″ animate_svg=”no” target=”_self” animation=”none” animation_delay=”0″ animated_box_style=”coloured” animated_box_rounded=”yes” width=”1/3″]

Lorem ipsum dolor sit amet isse pote nti. Vesquam ante aliquet lacusemper elit. Cras neque nulla, convallis non. commodo et, eui mod nonsese.

[/spb_icon_box] [spb_icon_box title=”Post-Operative Rehabilitation” box_type=”standard-left” box_icon_type=”image” image=”30″ svg_icon=”arrows-color-1_cloud-download-95″ animate_svg=”no” target=”_self” animation=”none” animation_delay=”0″ animated_box_style=”coloured” animated_box_rounded=”yes” width=”1/3″ el_position=”last”]

Lorem ipsum dolor sit amet isse pote nti. Vesquam ante aliquet lacusemper elit. Cras neque nulla, convallis non. commodo et, eui mod nonsese.

[/spb_icon_box] [spb_icon_box title=”Stress & Anxiety” box_type=”standard-left” box_icon_type=”image” image=”31″ svg_icon=”arrows-color-1_cloud-download-95″ animate_svg=”no” target=”_self” animation=”none” animation_delay=”0″ animated_box_style=”coloured” animated_box_rounded=”yes” width=”1/3″ el_position=”first last”]

Lorem ipsum dolor sit amet isse pote nti. Vesquam ante aliquet lacusemper elit. Cras neque nulla, convallis non. commodo et, eui mod nonsese.

[/spb_icon_box] [spb_blank_spacer height=”30px” width=”1/1″ el_position=”first last”] [/spb_row]

[David Martin – Support]

Perfect, this will do it:

.sf-icon-box.sf-icon-box-standard-left .image-display {
    float: left;
    margin-right: 10px;
    margin-bottom: 50px;
}
.sf-icon-box-standard-left .sf-icon-box-content {
    margin-top: -15px;
}

Thanks.