@media for Javascript text animation

StackOverflow https://stackoverflow.com/questions/22885107

Question

I have a Javascript text animation on my homepage and would like to insert an @media command using internal CSS to reduce this oversize text so it's smaller for iphone. I have tried the below, and various iterations but cannot get it to work. It's worth noting this is a wordpress theme and "bk_big_text" is a theme specific text id. Any help greatly appreciated!

 <head>
 <title>for mobile we do content script</title>
 <style type="text/css">

 @media only screen and (max-device-width: 480px) { 
      .bk_big_text {
           size: 40 !important;
      }
 }
 </style>
 </head>


 <p style="text-align: left;">[bk_big_text size="120" ]<script type="text/javascript">// <![CDATA[
 var words = ["splash","branded", "your", "digital", "fresh","integrated", "interactive", "creative", "powerful","witty", "editorial"];
 var i = 0;
 var text = "We do splash content";
 function _getChangedText() {
     i = (i + 1) % words.length;
     console.log(words[i]);
     console.log(i);
     return text.replace(/splash/, words[i]);
 }
 function _changeText() {
     var txt = _getChangedText();
     console.log(txt);
     document.getElementById("changer").innerHTML = txt;
 }
 setInterval("_changeText()", 1000);
 </script>
 <span id="changer" style="color: #ffffff;">We do content</span>[/bk_big_text]
Was it helpful?

Solution

You're missing a value for the size. Add %, or em or px:

@media only screen and (max-device-width: 480px) { 
      .bk_big_text {
           size: 40% !important;
      }
 }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top