how to send responsive email with ckeditor

Question

I am using ckeditor for sending emails from the webserver. But how can i make the content of the emails responsive? As far as i know, all the "responsive email" templates i tried start with:

<center>
   <table style="width: 100%">
      <tr>
         <td>
         Some content goes here...
         </td>
      </tr>
    </table>
</center>

Do i need to use media queries like this?

@media (max-width: 450px) {
   table {
    max-width: 360px;
   }
}

And if so: where do i have to put them in the textarea of ckeditor to send with the email?

Answer 1

If you click on the button in the toolbar to view source, you can add a style tag to the top of the page.

CKEditor also allows you to add inline CSS.

However for both of these to work, you need to enable allowedContent in ckeditor's config.js file.

 config.allowedContent = true;

Alternatively you can enable allowedContent when launching CKEditor

<script>
        CKEDITOR.replace( 'text-area-id' );
        CKEDITOR.config.allowedContent = true;
</script>

Here's the documentation: https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html