特定の幅のスクロールテキスト

Question

実際のカーラジオで曲名がスクロールする方法を模倣するために、スクロールテキストを内部に入れたいカーラジオのイメージがあります。マーキーを使ってみましたが、電話やタブレットの画面サイズには反応しません。これをやり遂げるにはどうすればいいですか？私は以下のコードを挿入しました。事前に助けてくれてありがとう。

body { 
 
    font-family: montserrat, sans-serif; 
 
    background-color: #eda4b7; 
 
    color: #030406; 
 
} 
 

 
a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    opacity: .6; 
 
} 
 

 
p { 
 
    width: 80%; 
 
    padding: 0 10%; 
 
} 
 

 
h2 { 
 
    padding: 0 15%; 
 
} 
 

 
h3 { 
 
    font-size: 16px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.date{ 
 
    font-weight: 800; 
 
    color: WHITE; 
 
    width: 60%; 
 
    padding: 0 5% 0 6%; 
 
    margin: 0; 
 
} 
 

 
/*-----Column stuff-----*/ 
 

 
.column20center { 
 
    width: 60%; 
 
     padding: 0 5% 0 6%; 
 
} 
 

 
.column10center { 
 
    width: 80%; 
 
    padding: 0 10%; 
 
} 
 

 
.column10left { 
 
    width: 40%; 
 
    padding-left: 10%; 
 
} 
 

 
.column10right { 
 
    width: 40%; 
 
    padding-right: 10%; 
 
} 
 

 
/*----- Hero Image -----*/ 
 

 
#heroimg { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
#heroimg img { 
 
    width: 100%; 
 
} 
 

 
#arthed { 
 
    color: #FFF; 
 
    position: absolute; 
 
    bottom: 100px; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-size: 70px; 
 
    font-weight: 700; 
 
    text-align: center; 
 
    width: 100%; 
 
    text-shadow: 2px 2px 3px #000; 
 
    font-family: quantico, montserrat;

<div id="heroimg"> 
 
      <img src="https://s3.amazonaws.com/snwceomedia/ohi/81dc2dc1-3763-4b8a-b061-adf9f62ecbd0.sized-1000x1000.png"> 
 
      <h1 id="arthed"> 
 
Title here</h1> 
 
     </div> 
 
     <p>placeholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder text</p>

Answer 1

あなたはスニペット以下のようなような何かを試すことができます。

.column10center { 
 
    width: 80%; 
 
    padding: 0 10%; 
 
} 
 

 
.column10left { 
 
    width: 40%; 
 
    padding-left: 10%; 
 
} 
 

 
.column10right { 
 
    width: 40%; 
 
    padding-right: 10%; 
 
} 
 

 

 
/*----- Hero Image -----*/ 
 

 
#heroimg { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
#heroimg img { 
 
    width: 100%; 
 
} 
 

 
#arthed { 
 
    color: #FFF; 
 
    position: absolute; 
 
    bottom: 30%; 
 
    left: 20%; 
 
    font-size: 70px; 
 
    font-weight: 700; 
 
    text-align: center; 
 
    width: 60%; 
 
    text-shadow: 2px 2px 3px #000; 
 
    font-family: quantico, montserrat; 
 
} 
 

 
.marquee { 
 
    height: 70px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.marquee div { 
 
    display: block; 
 
    width: 210%; 
 
    height: 70px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    animation: marquee 5s linear infinite; 
 
} 
 

 
.marquee span { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
@keyframes marquee { 
 
    0% { 
 
    left: 0; 
 
    } 
 
    100% { 
 
    left: -100%; 
 
    } 
 
}

<div id="heroimg"> 
 
    <img src="https://s3.amazonaws.com/snwceomedia/ohi/81dc2dc1-3763-4b8a-b061-adf9f62ecbd0.sized-1000x1000.png"> 
 
    <div id="arthed" class="marquee"> 
 
    <div> 
 
     <span>Title Here</span> 
 
     <span>Title Here</span> 
 
    </div> 
 
    </div> 
 
</div> 
 
<p>placeholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder textplaceholder 
 
    textplaceholder textplaceholder textplaceholder textplaceholder text</p>