Animation code leave space

Hi Ibrahim,

Thanks for using the Animate It!
The space you are referring to might be due to the font-size and letter-spacing of set by the theme.

Please try adding this CSS into WordPress Backend > Settings > Animate It! > Custom CSS:

.animated{
    font-size: 0;
    letter-spacing: 0;
}
.animated > *{
    font-size: 1em;
    letter-spacing: inherit;
}

Please note that this might effect the text elements inside the animate block.
If that’s the case, please share with me your animation page/post and I’ll try to find a solution.

This is very helpful and I appreciate it thank you so much.

I want to add that I noticed that the issue occur when I select the element and then insert the animation.But it goes fine when I insert the animation and then replace the text with my content.

And if you allowed me I’m little bit curious to know if this cool animations can be applied to the header or the logo.

Thanks again

Hi Ibrahim,

Like I said, the WordPress editor and theme CSS might be causing this.
When you add animation to a selected component, the editor might be adding some extra tags (most possibly paragraph).

There is no sure way around it.

Regarding animating the logo, yes it can be possible if the theme you are using has option to add custom CSS classes. Let me know your website link and I can check it out for you.

Hello again,

Regard adding animations to the logo/header > I’m using storefront theme the default theme for woocommmerce

Hi Ibrahim,

Sorry for the late reply.

Can you send me the website link?
I do not have a storefront theme setup, so I won’t be able to check how the header is applied.