Icon Box minimum height

[hamlik2002]

I was just wondering… would it be possible to add a minimum height to icon boxes so that when they are resized to a tablet screen all of their heights would be equal…? Or what is a good fix for it…? I’ve attached a pic.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Looks like you managed it? (see screenshots)

– Kyle

Attachments:

You must be logged in to view attached files.

[hamlik2002]

That’s the top part… I’m talking about the footer… And the top part is like that because I made sure the sentences and words I used are approximately the same length… Sometime that is not possible just like the footer. So the boxes result in mismatch of heights when the windows is resized.

[Kyle – SUPPORT]

Add this to your custom css:

@media only screen and (max-width: 1200px) { 
#footer-widgets .sf-icon-box-boxed-three .sf-icon-box-content-wrap {
  min-height: 277px;
}
}

– Kyle

[fmora617]

Hi Kyle –

I have a similar question as well. I am trying to:
1) Reduce the right side of the icon box. I am looking to have it the same margin as the left side of the icon box.
2) Then I would like to center the box (justify center), not the text
3) Lastly, is it possible to remove the icon? Will this effect other icon boxes where I have icons.

Screenshot –> http://i.imgur.com/0F7j4SB.png

The page where I am seeing this is: http://dev.fmora.com/?page_id=12217

Thanks!
Fabian

[Kyle – SUPPORT]

Hi

1 & 2) Reduce the width of the icon box to 1/2, then in the extra class field add ‘col-md-offset-3’

3) What is the point of using an icon box? Just use the ‘boxed content’ asset instead

– Kyle

[fmora617]

Hi Kyle –

I thought about using the boxed content, but then how would I be able to add an asset background to a boxed content?

Fabian

[Kyle – SUPPORT]

Ahh yes. Ok to remove the icon on an icon box ass this to your custom css:

.sf-icon-box h3 > i {
  display: none;
}

– Kyle

[fmora617]

Hi Kyle – if I want it to have it affect just one page is this CSS correct?

.page-id-12217 .sf-icon-box h3 > i {
display: none;
}

Site page is http://dev.fmora.com/?page_id=12217

Fabian

[Rui Guerreiro – SUPPORT]

Hi,

Yes, that’s it.

-Rui

[fmora617]

Hi –

I reduced the width of the icon box to 1/2 using:

.page-id-12217 .sf-icon-box[class*=”sf-icon-box-boxed-“] .sf-icon-box-content-wrap {
width: 40%;
padding: 40px 30px 15px 30px;
}

This worked fine.

I then added ‘col-md-offset-3’ to the extra class field and it did not center justify the box. Any ideas?

Thanks,
Fabian

[Kyle – SUPPORT]

Why did you reduce the icon box to 40% using CSS? All you need to do is click the arrow for the page builder asset and it will reduce width

– Kyle

[fmora617]

Hi Kyle –

Ok, I removed the 40% width CSS. I then clicked the arrow in the page builder to 1/2, but it resulted in this (cutting the whole page in half) –> http://i.imgur.com/gjPmtYM.png

I also tried entering [one_half] [/one_half] in the editor for the icon box only and had no luck as well.

What I am trying to do is have the box center justified on the page like the red box here –> http://i.imgur.com/rKDy5bD.png

Any other ideas?

Thanks,
Fabian

[Kyle – SUPPORT]

Please provide me with a link so I can set it up for you the correct way. You’re supposed to use the icon box page builder asset

– Kyle

[fmora617]

This reply has been marked as private.