Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › Icon Box Margins
New Landing › How can we help? › Themeforest Theme Support › Dante › Icon Box Margins
- This topic has 7 replies, 3 voices, and was last updated 9 years by Mohammad – SUPPORT.
-
Posted in: Dante
-
August 13, 2014 at 4:45 pm #100801
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.August 14, 2014 at 9:28 am #100993Hi,
Please use this css code:-
.home-box {margin-right: 5px;max-width: 435px;padding: 10px 10px 5px;}
Thanks ๐
With Best Regards
MohammadOctober 22, 2014 at 8:05 am #122213Hi,
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
Kellyhttp://www.kelle.co.nz/about-2/
Attachments:
You must be logged in to view attached files.October 22, 2014 at 8:42 am #122234Hi,
@Kelle27 – please mark your screenshot image because i am getting your issue exactly.
Thanks
MohammadOctober 22, 2014 at 6:49 pm #122441Hi 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,
KellyAttachments:
You must be logged in to view attached files.October 23, 2014 at 3:04 am #122486Hi,
Please use this custom css code:-
.sf-icon-box-content p{word-wrap:break-word;}
Thanks
MohammadOctober 23, 2014 at 6:20 pm #122775Thanks Mohammad! Works perfectly.
October 24, 2014 at 1:06 am #122831Hi,
You most welcome. I’m glad that issue resolved.
Thanks ๐
With Best Regards
Mohammad -
Posted in: Dante
You must be logged in and have valid license to reply to this topic.