prohor Posted December 13, 2017 Share Posted December 13, 2017 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; } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.