Trying to change the text of a button/link on mobile. However I have no access to the css and it has to be done within. I tried few methods of checking screen-size but it takes no effect. Is there a robust way to do this? It has to be in-html styling.
this is the fiddle file: https://jsfiddle.net/sbwLwg3y/3/
<script>
if (screen.width > 470) {
document.getElementById("changeMe").innerHTML = "link text changed";
}
</script>
<table width="100%">
<tr>
<td align="center">
<table cellspacing="10">
<tr>
<td bgcolor="#E2A71D" class="innertd buttonblock" style=" background-color: #E2A71D;">
<a alias="" href="#tag" style=" color: #FFFFFF; background-color: #E2A71D;" title="Request a call back">btn1</a></td>
<td bgcolor="#E2A71D" class="innertd buttonblock" style=" background-color: #E2A71D;">
<a id="changeMe" class="callnow1" href="tel:345345345" style=" text-decoration: none; display: block; font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 600; color: #FFFFFF; ">btn2</a></td>
</tr>
</table>
</td>
</tr>
</table>