Help with vertical line spacing in responsive/mobile view

[ChrisjChrisj]

(thanks for all previous help in html/css)

Now, I have these lines of text that display successfully in responsive/mobile view, using the code below.

I’d like to close the gap between each of the three horizintal lines.
I am looking for guidance/suggestion on how to do that.

<section class="animation3">
<span class="text1">TEXT</span><span id="square"></span><span class="text">TEXT TEXT</span>
</section>

<section class="animation3-1">
<span class="text2">TEXT2</span><span id="square"></span><span class="text1">MORE TEXT</span>
</section>

<section class="animation3-3">
<span class="text1">TEXT</span><span id="square"></span><span class="text2">SOME MORE</span>
</section>

@media only screen and (max-width: 640px){
  .animation3 {
   width: 95%;
  }

  .animation3 span {
  align-items: center;
  }

.animation3-1 {
 width: 95%;
  }

  .animation3-1 span {
  align-items: center;
  }

  .animation3-3 {
  width: 95%;
  }

  .animation3-3 span {
   align-items: center;
 }

.text1 {
font-size:5vw;
color: #ccc;
    }

#square {
width: 3vw;
height: 3vw;
margin: 0px 3px 0px 3px;
background-color: #800000;
}

.text2 {
font-size:5vw;
color:#fff;
}
}

[PaulOB]

@ChrisjChrisj

I’d like to close the gap between each of the three horizintal lines.

There is no gap between the horizontal lines apart from that caused by the font-size and default line-height. You can reduce the line-height like so.

.text1,.text2{line-height:1.0}

Any smaller than 1 and the text will overlap the lines above and below.

Note that ids are unique. It is not valid to have 3 elements with id=“square”

[Ray.H]

@PaulOB

There is no gap between the horizontal lines apart from that caused by the font-size and default line-height.

I was guessing there may have been margins set on the <section> elements that were not reset in the media query.

Hard to say without the complete css or a working test page.