CKEditor Responsive Plugin

These module allows you to make responsive columns in a textfield, using CKEditor. The responsive CSS you need to make yourself...

First activate the responsive area button.

Screen000276.png

Choose the layout.

Screen000282.png

Some examples

Screen000277.png

Screen000278.png

The result (3 columns)

Screen000280.png

On smartphone...


Screen000281.png

The module adds classes tot the divs of the colums.

Screen000279.png

It is up to you to add the CSS yourself.

Here my simple version, based on the CSS of the module itself and adapted for a small screen.

/*
based on the CKEditor Responsive Plugin CSS itself*/

/* 4.85%;  } /* grid_1  */
.onecol,
.grid-1 {
  width: 5.801104972%;
}

/* 13.45%; } /* grid_2  */
.twocol,
.grid-2 {
  width: 14.364640883%;
}

/* 22.05%; } /* grid_3  */
.threecol,
.grid-3 {
  width: 22.928176794%;
}

/* 30.75%; } /* grid_4  */
.fourcol,
.grid-4 {
  width: 31.491712705%;
}

/* 39.45%; } /* grid_5  */
.fivecol,
.grid-5 {
  width: 40.055248616%;
}

/* 48%;    } /* grid_6  */
.sixcol,
.grid-6 {
  width: 48.618784527%;
}

/* 56.75%; } /* grid_7  */
.sevencol,
.grid-7 {
  width: 57.182320438000005%;
}

/* 65.4%;  } /* grid_8  */
.eightcol,
.grid-8 {
  width: 65.74585634900001%;
}

/* 74.05%; } /* grid_9  */
.ninecol,
.grid-9 {
  width: 74.30939226%;
}

/* 82.7%;  } /* grid_10 */
.tencol,
.grid-10 {
  width: 82.87292817100001%;
}

/* 91.35%; } /* grid_11 */
.elevencol,
.grid-11 {
  width: 91.436464082%;
}

/* 100%;   } /* grid_12 */
.twelvecol,
.grid-12 {
  width: 99.999999993%;
}

.onecol,
.twocol,
.threecol,
.fourcol,
.fivecol,
.sixcol,
.sevencol,
.eightcol,
.ninecol,
.tencol,
.elevencol,
.twelvecol,
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  position: relative;
  float: left;
  margin-left: 2.762430939%;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*.ckeditor-col-container {
  background-color: #ffbcbc;
  overflow: hidden;
  margin-bottom: 1em;
}*/

.first-col {
  margin-left: 0;
}

.last-col {
  margin-right: 0;
}

@media only screen and (max-width: 550px) {
   .first-col {
  margin-left: 10px;
}

.last-col {
  margin-right: 10px;
}
.onecol,
.twocol,
.threecol,
.fourcol,
.fivecol,
.sixcol,
.sevencol,
.eightcol,
.ninecol,
.tencol,
.elevencol,
.twelvecol,
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  position: relative;
  float: left;
  margin-left: 2.762430939%;
width:90%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
}