اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال

اصدقائي الكرام لدي الكود التالي من وضع شريط اخبار اخر المواضيع بشكل افقى
كما بالصورة التالية
اريد ان يظهر ايضا بنسخة الجوال ( المنتدى يعمل على نسخة Modern BB
يعني فقط يعمل فقط بنسخة الحاسوب


الكود

الكود:

$(function getNews() {
        var lastNewsTitle = 'آخر المواضيع',
        forumNumper = '', // رقم القسم
        numberOfNews = '20', // عدد المواضيع
        speedOfNews = '120', // سرعة التتالي
        separateImg = 'https://i.servimg.com/u/f29/20/07/03/20/person10.png',  // الصورة الفاصلة بين كل موضوع
        newsTitleBg = '#369FCF',    // لون خلفية نص آخر الأخبار
        newsBg = '#FFF',    // لون خلفية شريط آخر الأخبار
           
        newsLocation = '.newsLocation',
        lastNewsContainer = document.createElement("DIV");
    lastNewsContainer.className = "lastNewsContainer";
    lastNewsContainer.innerHTML =
        '<div class="lastNewsTitle">' + lastNewsTitle + '</div><div class="lastNewsItems-wrap"><div class="lastNewsItems marquee"></div></div>';
    if (document.querySelector(newsLocation)) {
        document.querySelector(newsLocation).appendChild(lastNewsContainer);
 
        function loadDoc(f, c) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var parser = new DOMParser(),
                        newsResult = parser.parseFromString(this.responseText, "text/xml");
                    for (i = 0; i < c; i++) {
                        var lastNewsBlock = document.createElement('SPAN');
                        lastNewsBlock.className = 'lastNewsBlock';
                        lastNewsBlock.innerHTML = '<a href="' + newsResult.querySelectorAll('item')[i].querySelector('link').innerHTML + '" class="lastNews">' + newsResult.querySelectorAll('item')[i].querySelector('title').innerHTML + '</a><img src="' + separateImg + '" class="separateImg" alt="" />';
                        document.querySelector('.lastNewsItems').append(lastNewsBlock);
                    }
                }
            };
            xhttp.open("GET", "/feed?f=" + f, true);
            xhttp.send();
        }
        loadDoc(forumNumper, numberOfNews);
        var newsStyle = document.createElement('STYLE');
      // newsStyle.innerHTML = '.marquee { padding-right: 100%; white-space: nowrap; animation: marquee ' + speedOfNews + 's linear infinite; } .separateImg, .lastNews { display: inline-block; vertical-align: middle; } .separateImg { margin: 0 40px; max-width: 30px; max-height: 30px; } .lastNewsBlock:last-child .separateImg { display: none; } .lastNewsItems-wrap:hover .marquee { animation-play-state: paused } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(100%, 0); } } .lastNewsContainer { display: inline-flex; align-items: center; background: ' + newsTitleBg + '; color: #FFF; margin: 20px 0; box-sizing: border-box; } .lastNewsTitle { min-width: 100px; text-align: center; } .lastNewsItems-wrap { width: calc(100% - 100px); background: ' + newsBg + '; border: 1px solid ' + newsTitleBg + '; overflow: hidden; }';
      newsStyle.innerHTML = '.marquee { display: inline-block; padding-right: 100%; white-space: nowrap; animation: marquee ' + speedOfNews + 's linear infinite; }.separateImg, .lastNews { display: inline-block; vertical-align: middle; } .separateImg { margin: 0 40px; max-width: 30px; max-height: 30px; } .lastNewsBlock:last-child .separateImg { display: none; } .lastNewsItems-wrap:hover .marquee { animation-play-state: paused } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(100%, 0); } } .lastNewsContainer { display: inline-flex; width: 100%; align-items: center; background: ' + newsTitleBg + '; color: #FFF; margin: 20px 0; box-sizing: border-box; } .lastNewsTitle { min-width: 100px; text-align: center; } .lastNewsItems-wrap { width: 100%; background: ' + newsBg + '; border: 1px solid ' + newsTitleBg + '; overflow: hidden; }';
     
      document.head.appendChild(newsStyle);
        setInterval(function() {
            var marqueeW = document.querySelector('.lastNewsItems').scrollWidth;
            document.querySelector('.lastNewsItems').style.minWidth = '' + marqueeW + 'px';
        }, 500);
    }
});
// by omarpop23

شكرا لكم سلفا

فقط ضع في نهاية قالب الـ overall_header الخاص بنسخة الجوال

الكود:

<div class="newsLocation"></div>

لم تظهر المواضيع ضمن الشريط
فقط ظهر الشريط مع الصورة الرمزية المتحركة الفاصلة
مع الشكر يلفا

ضع اكواد الـ CSS التالية في ورقة الـ CSS

الكود:

#mpage-body-modern a.lastNews {
    color: #39c;
    font-size: 12px;
}

كل الشكر صديقي عمر
تمام