Skip to main content

Forums

This topic contains 14 replies, has 5 voices, and was last updated by  its_boxy123 4 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #277265

    its_boxy123
    Participant

    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

    #277267

    Paulie_D
    Moderator

    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.

    #277276

    its_boxy123
    Participant

    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

    #277298

    Beverleyh
    Participant

    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.

    #277300

    its_boxy123
    Participant

    @beverleyh Thank you for the help!

    #277301

    Shikkediel
    Participant

    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.

    #277333

    its_boxy123
    Participant

    @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!

    #277334

    Shikkediel
    Participant

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

    #277336

    Beverleyh
    Participant

    These might help to get you started:

    Modify as desired.

    #277337

    its_boxy123
    Participant

    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.

    #277338

    its_boxy123
    Participant

    Thanks for that!

    #277339

    its_boxy123
    Participant

    @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

    #277342

    Shikkediel
    Participant

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

    #277358

    iosman
    Participant

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

    #277495

    its_boxy123
    Participant

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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star