خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

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

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: https://ibb.co/dj2OvR
Code:
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;
}

برچسب: نویسنده: آیلین رضوانی تاريخ: جمعه 24 آذر 1396 ساعت: 7:56

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه