Last Updated: September 09, 2019
· thebigpumpkin

Fool Proof Responsive Design Solution

Using javascript and simple math, without using percentage based properties you can load the same basic layout at whatever screen size the user is browsing in.

This you can do with absolute positioning using px.

Below is the basic algorithm. You set a target screen size and then readjust the position based on the percent difference between that and the user's screen size.

var Layout = function(){
  this.compute= function(x,y){
    var reX = x-this.targetX;
    var reY = y-this.targetY;
    var teX = reX+this.targetX;
    var teY = reY+this.targetY;


var layout = new Layout;

Below are the elements coordinates that correspond with your target width/height.

var mapXOne =   [430,540,620

var mapYOne =   [200,200,200


Now reset the x and y coordinates.

for(var i=0;i<mapXOne.length;i++){
  mapXOne[i]= mapXOne[i]*layout.resultX;
for(var i=0;i<mapYOne.length;i++){
  mapYOne[i]= mapYOne[i]*layout.resultY;

Finally you can apply these coordinates to the elements.