Why Scrolling text is not showing full text in mobile view when desktop verstion show

[prohor]

 I have a webpage with following css properties and html for scrolling text. It is showing properly in desktop view but having problem in mobile view like breaking the full text in two line and 2nd line is partially showing from upper part. I am not finding a way to solve that. please see the image for problem.  image link of the problem : https://ibb.co/dj2OvR

html code
************************
<div class="NewsFeed" id="NewsScroll">
  <div id="text">
	  <?php
$stmt = $DB_con->prepare(" SELECT scrollnotice, id FROM products  ORDER BY id DESC  LIMIT  0, 1");
	$stmt->execute();
	if($stmt->rowCount() > 0)
		{
		while($row=$stmt->fetch(PDO::FETCH_ASSOC))
				{
			echo $row['scrollnotice'];
	
		}
	} 
			 ?>
	  </div>
	</div>

*************************
css code:
#NewsScroll{
	height: 40px;
	width: auto;
	
background: rgb(63,76,107); /* Old browsers */
background: -moz-linear-gradient(top, rgba(63,76,107,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
color:red; 
line-height:30px;
overflow:hidden;
position:relative;
	
}
#text {
  position:absolute;
  top:5px;
  left:0;
  width:100%;
  height:30px;
  font-size:25px;
  animation-name: slide;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: slide;
  -webkit-animation-duration: 30s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-iteration-count: infinite;
}