Icon Box Margins

[artemartemov]

Hello,

I was wondering if someone could help me out with the icon boxes and the margin in between them.

I have a 3 column row of icon boxes, and added a background to each one. However there is no margins in between each of the columns, and attempting to add a small margin – even 2px causes the last box to break onto the next row.

Here is the code I am using currently to achieve the results I currently have (I also added a custom class to each box .home-box

.home-box{
	background: #F8F8F8;
	padding: 10px 10px 5px 10px;
	border: 1px solid #f0f0f0;
	min-height: 152px;

}

.home-box div.sf-icon-box-content a{
	text-decoration: underline;
	position: absolute;
	bottom: 0;
	right: 0;
}

.sf-icon-box.sf-icon-box-left-icon-alt .sf-icon-box-content-wrap{
	margin-left: 60px;
}

div.sf-icon-box-content-wrap{
	min-height: 132px;
	max-height: 132px;
	display: block;
	position: relative;
}

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this css code:-
.home-box {margin-right: 5px;max-width: 435px;padding: 10px 10px 5px;}

Thanks 🙂
With Best Regards
Mohammad

[Kelle27]

Hi,

I’m also enquiring about margin spaces in between my icon boxes.
On my home page and About us page I have four icon boxes side by side.
On a desktop large browser the icons have good amount of spacing between them.
As you scale it down further with your cursor it can get to the point where there is no space in between them and sentences overlap.

Please see example.
Could you please help me with a custom code to ensure there’s always padding in-between the icon boxes?

Thanks
Kelly

http://www.kelle.co.nz/about-2/

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,

@Kelle27 – please mark your screenshot image because i am getting your issue exactly.
Thanks
Mohammad

[Kelle27]

Hi Mohammad,

Sorry I must of forgotten to attached.

I’ve attached 2 screenshots. 1 of which there is margin space in-between all the icon boxes which is what I want. The 2nd screenshot is of when I’ve dragged the browser screen so its smaller. The result is that there is no margin space and icon box 1 starts to overlap with icon box 2.

Can we please create a custom code so theres always atleast 40px in between them all.

Hope this makes sense.

Many thanks,
Kelly

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
.sf-icon-box-content p{word-wrap:break-word;}
Thanks
Mohammad

[Kelle27]

Thanks Mohammad! Works perfectly.

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved.
Thanks 🙂
With Best Regards
Mohammad