Help with adding different font sizes for responsive view

[ChrisjChrisj]

I am using this open source code for a web page animation (below), which works successfully.
It uses the <h5 and ‘section class’ code. I’d like to show the text in a smaller size in a mobile view, but when I remove the <h5 & /h5> tags to then modify the font size it displaces the section of text to the top of the page. So, I’d like to keep the section of code in place, but be able to modify the font size for mobile view.

.animation-box12 {
  display:flex;
  min-height: 3.5rem;
  margin: 100px 0 0 100px;
  justify-content: center; 
  align-items: center;
  width: 100%;
}

.animation-box12 span {
  margin: 0 .15em;
  width: 100%;
  animation-name: fadeInOut-1;
}

<h5>
<section class="animation-box12">
<span class="text1" style="color:#000000">HELLO</span><span class="text1" style="color:#666666"> TEST</span><br>
<span class="text1" style="color:#ffffff">This Sentence</span><br>
<span class="text2" style="color:#eeeeee">This Other Sentence</span>
</section>
</h5>

Any guidance is appreciated.

[bwclovis]

1st, please no h5, I bet its only for styling. 2nd, no block in side inline. 3rd, you have a class on the spans, use them (talking about the inline styles).

As for your question:
Media Queries FTW

[PaulOB]

@ChrisjChrisj

I am using this open source code for a web page animation (below)

I think you need to post a working demo to get proper help as the code you provided will show no animation or ill effect when removing the tags mentioned (apart from font-size and default margins).

As mentioned by @bwclovis you cannot nest block elements inside a heading tag, and heading tags should be used for headings only, and at the correct level.