Hi all -

I am sensing I am not alone in my quest for answers here, but haven't been able to find any solutions already found to the following.

I've developed a responsive template design which I installed successfully onto Silverstripe [3.1. ]. All seems to work well, except that images inserted through the TinyMCE Editor retain their fixed widths, and break my layouts at smaller viewports. I've searched for hacks and plugins that would allow me to change the editor's preference for px-based dimensions into percentages, but to no avail.

Take a look at http://www.e-lumini.com, a page a graced with two Silverstripe logo's. When reducing screen width to about 450px the layout cracks. I'd like the images to take a 100% width at that point, with float = none.

Can anyone give me a some pointers on how I can achieve this?

[yes, Page.ss still needs a little TLC and tidying-up. Will get to that shortly.}

Cheers -

Raymond

You can't change the editor (that I know of) but you can override everything with CSS.

For example, this will stop images being bigger than their parent:

.typography img {
  max-width: 100%; height: auto;
}

You might also want to override alignments at smaller breakpoints as floated images can look rubbish when they take up 60% of the column, e.g.

.typography .left,
.typography .leftAlone,
.typography .right,
.typography .center {
  display: block;
  float: none;
  margin: 0 auto 1em;
}

@media (min-width: 600px) {
  .typography .left {
    float: left;
    margin-right: 1em;
  }

  .typography .right {
    float: right;
    margin-left: 1em;
  }

  .typography .leftAlone {
    float: left;
    margin-right: 100%;
  }
}

Or in the above example you might want to retain the floats but just have a smaller max-width, whatever works best for your layout really.

Hope this helps,
Colin

That, of course, works like a treat Colin!

Can't believe I overlooked that simple solution. Stopped hitting myself with any hard objects I could find over the last 12 hours.... :)

Thanks heaps for your response mate; much appreciated!

Raymond