Q: How to use variables in DOM CSS I want to make my webpage responsive using javascript. Can anyone tell me why this doesn't work and how should i do this? 
document.getElementById("id1").style.left = variable;


A: Very hard to understand what it is you are asking for however I created a fiddle that is passing a variable to show you the syntax. https://jsfiddle.net/b6cLt0td/1/
<div id="id1">

</div>
<input type="button" value="click me" onclick="someFunc()"/>
<input type="button" value="move me" onclick="moveFunc()"/>
<script>
function someFunc(){
var red ="red";

document.getElementById("id1").style.backgroundColor = red;
}
function moveFunc(){
var dist = 100;

document.getElementById("id1").style.left = dist +"px";
}
</script>


A: Your variable needs to be a string ending with px, e.g., variable = "100px";
For more detail on the left property:
http://www.w3schools.com/jsref/prop_style_left.asp
Cheers

A: Here is a solution using jQuery:
$('#id1').css({
    left: variable
});

Also, just a suggestion, but in case you have not, you might want to consider making your page responsive by using media queries instead of by using javascript.
More on responsive design
