Changing Animated Icon Box Size

[tsimarketing]

I am wanting to add the animated icon boxes to my website. I will be adding a decent amount of them on the same page and right now they are a little big. I was wondering if there is a specific code I could use to make the boxes smaller?

[laranz – SUPPORT]

Hi,

Can you post the direct URL of the animated icon box page?? And also a screenshot explaining which size you want to reduce so that we can understand it easily.

Let us know,

Thanks,
laranz.

[tsimarketing]

Electronic Health Records

Above is the link to the page with the animated icon boxes. I have also attached a screenshot showing the size I would like them to be. The red box is about 75px x 75px. Is it possible, with a custom css code, to make these boxes this size? Would the icon and text get smaller as well?

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi,

Try this Custom CSS in Theme Options.

.sf-icon-box-content p { line-height: 100%; }
.sf-icon-box-animated .front { padding: 20px; }

Let us know,

Thanks,
laranz.

[tsimarketing]

That worked to make the boxes shorter in height, what would I need to add to that css code to make the boxes a little skinnier? I tried adding another pixel size after the 20 px but that didn’t do anything.

[laranz – SUPPORT]

Hi,

You can make it skinny by altering the column size, currently you are putting 4 per row, increase it to 6 per row. We can’t alter the width in any other way, because they are aligned by grid.

Let us know,

Thanks,
laranz.