I have a Javascript text animation on my homepage and would like to insert an @media command using internal CSS to the homepage scripted text ‘we do content’. I am trying to make this so when viewed on an iphone screen size the text changes to be displayed on three separate lines, rather than one. ie:
We
Do
Content
I’m at a bit of a loss what to values/ elements to call out for the @media command. I think maybe /br may be one of the three things needed but otherwise a bit stumped! It’s worth noting this is a wordpress theme and “bk_big_text” is a theme specific text id. Any help greatly appreciated!
<head>
<style type="text/css">
@media only screen and (max-width: 480px) {
.changer (not sure if this is right?) {
what goes here?: /br !important;
}
}
</style>
</head>
<p style="text-align: left;">[bk_big_text size="120" ]
<script type="text/javascript">// <![CDATA[
var words = ["content","brand", "identity", "digital", "fresh","integrated", "interactive", "creative", "powerful","witty", "editorial"];
var i = 0;
var text = "We do content";
function _getChangedText() {
i = (i + 1) % words.length;
console.log(words[i]);
console.log(i);
return text.replace(/content/, words[i]);
}
function _changeText() {
var txt = _getChangedText();
console.log(txt);
document.getElementById("changer").innerHTML = txt;
}
setInterval("_changeText()", 2200);
// ]]></script>
<span id="changer" style="color: #ffffff;">We do content</span>[/bk_big_text]
