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.
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;
}