Height of animated icon boxes not adjusted properly on iPads

[joerg]

Hi guys,

there is a bug in conjunction with the height of animated icon boxes. The height is not adjusted properly on iPads, and also on a Mac when reducing the browser window width to a certain level. Please see the attached screenshots.

Regards

[Kyle – SUPPORT]

Hi

Please could I see your link so that I can check the issue?

– Kyle

[joerg]

The site is not online yet, but you can reproduce the issue in the dante demo (locally or on ThemeForest).

I attached another screenshot showing the issue in the demo.

[Kyle – SUPPORT]

Hi

I will forward this to the developer to see if he can provide a fix

– Kyle

[joerg]

Great, thank you, Kyle.

[Swift Ideas – Ed]

Hi @joerg,

Can you try this custom css and let me know?

@media only screen and (min-width: 768px) and (max-width: 959px) {
.sf-icon-box-animated .back h3 {
margin-top: 0;
margin-bottom: 5px;
}
}

– Ed

[joerg]

Hi Ed, it got a little bit better, but there is still some text cut off – zwo lines of text in my case. See the new screenshots for illustration.

[Mohammad – SUPPORT]

Hi,
Please change margin-bottom: 5px; to margin-bottom: -5px; so new updated code :

@media only screen and (min-width: 768px) and (max-width: 959px) {
.sf-icon-box-animated .back h3 {
margin-top: 0;
margin-bottom: -5px;
}
}

Hope that should work and let me know your feedback.
Thanks

[joerg]

Nope, just repositioning the text doesn’t do the trick. The boxes need to be resized vertically. I added two more screenshots showing values of -5px and -50px.

[Swift Ideas – Ed]

Hi @joerg,

The issue is that the height of the asset is set based on the front of the icon box – so that they all keep the same height and in-line.

Try this custom css to override the height for iPad portrait:

@media only screen and (min-width: 768px) and (max-width: 959px) {
.sf-icon-box-animated .front {
height: 340px;
padding: 100px 20px;
}
}

You can alter the height/padding to suit your needs.

– Ed

[joerg]

Perfect, that’s what I needed. Thank you.

[Kyle – SUPPORT]

Great! thanks Ed

– Kyle

[joerg]

Just a litte correction: max-width needs to be set to 991px:

@media only screen and (min-width: 768px) and (max-width: 991px) {
.sf-icon-box-animated .front {
height: 360px;
padding: 100px 20px;
}
}

[Kyle – SUPPORT]

Ok thanks

– Kyle