Scroll animation not working

I’d recommend that you invest some time to learn more about HTML, it’ll make your life much easier in the long run.

But as for your question - icons declared with the <i> tag are inline-elements, so they don’t cause a line break. You can change that in your CSS by setting

i {
    display: block;
     // or
    display: inline-block;
}

<p /> doesn’t exist by the way, <p> is not a self-closing tag, so it must be closed with </p>.

1 Like

I already know a lot about HTML as you can see but I’m not perfect nor are the lecturers who fail to explain things in a clear way to learners. Thanks for your help.

Just to show you an example: https://css-tricks.com/aos-css-driven-scroll-animation-library/

I tried to apply and it won’t work.

Perhaps you can show me how you would do it without the closed br tag.

Learning to code means learning to solve problems. Of course you can always ask questions when you get stuck, but you won’t learn that much if you let others solve the problem in a forum. I’m not telling you what to do, though.

And is that the article’s fault? :stuck_out_tongue_winking_eye:

Concerning the <br> problem, I’ve already given the solution, you’d have to set your <i> tags to either block or inline-block, that will cause a linebreak after them.

:slight_smile:

I’m not saying that it’s the article’s fault. All I’m saying is that we need teachers who explain things better. That’s all. Have you tried removing the /br tag to see what happens?

I don’t want to sound like a jerk here, but with all of the resources available to you at your fingertips over the Internet this argument does not hold much weight. If you want to do this stuff professionally then you will find it is a never ending cycle of learning and you will be responsible for learning it, not some instructor.

I agree with you but not all teachers explain the concepts well to the students. I’m talking from experience.

Anyway, this topic is closed for me. I’ll not post here. Thanks to all of you.

That’s a bit difficult because there’s no codepen or other working example where I could play around with the code, so I can only guess what’s happening:
Are you trying to create a line break with the <br> tag so the elements are all on their own lines? In that case, again, setting them to display:block or inline-block will solve the issue.
Are you using that <br> tag to create more distance between elements that are already on their own lines? In that case, giving the elements a margin-top/margin-bottom would be the way to do that.

I’ll copy your code from above and modify it so it’s valid HTML, and hopefully does what you want it to do:

<div class="item item-2">
    <blockquote>"Sit amet, consectetur adipisicing elit, sed
     do eiusmod tempor incididunt ut labore et dolore magna aliqua.." - Huffington Post Quote</blockquote>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
     et dolore magna aliqua.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>

    <p>
       <strong>
          <i class="fas fa-check-square"></i>  et dolore magna aliqua
          <i class="fas fa-check-square"></i>  et dolore magna aliqua
          <i class="fas fa-check-square"></i>  et dolore magna aliqua
          <i class="fas fa-check-square"></i>  et dolore magna aliqua
          <i class="fas fa-check-square"></i>  et dolore magna aliqua
          <i class="fas fa-check-square"></i>  et dolore magna aliqua
          <i class="fas fa-check-square"></i>  et dolore magna aliqua
          <i class="fas fa-check-square"></i>  et dolore magna aliqua
          <i class="fas fa-check-square"></i>  et dolore magna aliqua
          <i class="fas fa-check-square"></i>  et dolore magna aliqua
          <i class="fas fa-check-square"></i>  et dolore magna aliqua
        </strong>
    </p>

    <p>Let's Get Started! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

    <div><button class="button">Learn more</button></div>
</div>

Hello, Thanks for your offer. I was able to figure it out. Many thanks again.

Happy to help, reading a bit about the difference between inline- and block-elements might save some nerves in the future:

https://www.w3schools.com/htmL/html_blocks.asp

I know the difference already. An image for example is inline element. Whereas h1, h2, etc. are block elements

Hello everyone,

I’d like to share with you how I made the spacing between paragraphs work.
To make space between paragraphs, one needs to add this in the CSS:

p {
    margin-top: 1em;
    margin-bottom: 1em;
}

if I simply type:

 <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>

            <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>

then there will not be enough spacing between each paragraph. However, by adding the above code into the CSS file, one can influence the amount of spacing. I hope this will help someone in the future. Thanks again to all.