testimonal animation position: abso..

[its_boxy123]

Hey guys,

I really need to get this website done asap so please help me out.

So the problem is that when my animation occurs on the mobile version of the website the text as overlapping each other as show on the link below, but on the computer version its perfectly fine so can you guys help me out please.

Thanks
-Boxy

https://www.dropbox.com/s/c85a7kqn948phyt/Screenshot%202018-10-04%2013.45.53.png?dl=0

[Paulie_D]

We’d need to see a demo of live code in Codepen.io.

You’re unlikely to get many users clicking random links to images.

[its_boxy123]

Here is the link but if you add paragraph to it it colides with this text help me please! https://codepen.io/anon/pen/KGMNyd

[Beverleyh]

The animated text has been pulled out of the flow of the document because it’s positioned absolutely, while the standard paragraph sits in the normal flow and can’t “see” the animation, hence the overlap.

You could push the paragraph of standard text away from the animation with a top margin.

You could also change how much of a margin is there inside media queries for different screen sizes.

[its_boxy123]

@beverleyh Thank you for the help!

[Shikkediel]

Here’s a solution that uses a bit of Javascript:

codepen.io/anon/pen/dgXVJe

It loops through the text elements and gets their maximum height, then sets that same height to the parent container so the following element will “notice” it.

[its_boxy123]

@shikkediel i also need help with adding more slides if i add the slide and when i try to adject the css it messes up can you help me please? Thank you!

[Shikkediel]

If you post another pen that shows the issue, I’m sure we can figure it out.

[Beverleyh]

These might help to get you started:

• The CSS-only timings aspect (calculations/logic in the source http://fofwebdesign.co.uk/template/_testing/quotes-css.htm

• Slide-in text automated with JS http://fofwebdesign.co.uk/template/_testing/sweep-in-news-scroller-android.php

Modify as desired.

[its_boxy123]

https://codepen.io/aryan-sharma/pen/rqMmoj It still wont work I am i doing something wrong? I don’t really know java script. btw the issue eccours when you take it to mobile size.

[its_boxy123]

Thanks for that!

[its_boxy123]

@Shikkediel i can’t show it to you because it isn’t working same as it is working on pen on sublime it is different all the text are in line like:

ab
cd
ef
sd
sd
sd

like that as shown above can send you the drop box image

[Shikkediel]

If I can’t see the page live, I’m afraid I won’t be able to offer much help…

[iosman]

Wow actually i loved your blog man..Thanks for sharing awesome content.

[its_boxy123]

@Shikkiediel Don’t Worry about it I have resolved the issue Thank you for Helping me!

[Author]

Posts