title: Ckeditor and responsive layout
body: <p>i'm struggling with Ckeditor for a weird behaviour i got when loading some templates.</p>
  
  <p>My template has a part of css with some media queries:</p>
  
  <pre><code>    @media only screen and (max-width: 599px)
  
  {
  /* General settings for Mobile */
  body{width:auto!important;}
  table[class=fullWidth]  {width: 100%!important;}
  .....
  }
  
  and a part of html, simple table like :
  
  &lt;table width="600" border="0" cellpadding="0" cellspacing="0" align="center"     style="font-size: 0;line-height: 0;border-collapse: collapse;" &gt;
   &lt;tr&gt;
    &lt;td width="600" height="20" style="font-size: 0;line-height: 0;border-collapse:     collapse;"  class="MobileScale2"&gt;&amp;nbsp;&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I paste this code inside the box of Source and, with a pluging made by me, i resize the content area with a simple:</p>
  
  <pre><code>$('.cke_wysiwyg_frame').animate({"width": "480px"},400);
  </code></pre>
  
  <p>The weird fact  is: with the Standard Edition of Ckeditor i see that  the layout behaves correctly, changing the width of table from 600 to 100%! when i launch the jquery command,
  with the Full edition this does not happens at all...the media query is totally ignored.</p>
  
  <p>This is my config.js file:</p>
  
  <pre><code> * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
   * For licensing, see LICENSE.html or http://ckeditor.com/license
   */
  
  CKEDITOR.editorConfig = function( config ) {
          // Define changes to default configuration here. For example:
          // config.language = 'fr';
          // config.uiColor = '#AADC6E';
    //config.ignoreEmptyParagraph = false;
     config.allowedContent = true;
    //config.allowedContent = 'title img form input param pre flash br a td p span font em strong table tr th td style  script iframe u s li ul div[*]{*}(*)';
     config.startupShowBorders = false;
     config.EnableMoreFontColors = 'true' ;
  
    config.toolbarGroups = [
      { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
      { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
      { name: 'links' },
      { name: 'insert' },
      { name: 'tools' },
      { name: 'mode' },
      { name: 'Image'},
      { name: 'others',groups: [ 'colorpicker']},
      '/',
      { name: 'others'},
      '/',
      { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
  
      { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
      { name: 'styles' }
  
  ];
  
  
  };
  </code></pre>
  
  <p>Anybody can help? I tried to search this problem in google, here and inside the forum of Ckeditor community, but nothing !</p>
  
  <p>Thanks!  </p>
  
  <hr>
  
  <p>After hours analysing the code ...i got to fix it.</p>
  
  <p>For some reason The Full version of Ckeditor doesn't understand this syntax:</p>
  
  <p>table[class=fullWidth]</p>
  
  <p>It needs to be changed to:</p>
  
  <p>table.fullWidth</p>
  
  <p>Now it works! </p>
  
  <p>Cheers ;)</p>