Responsive View

Configure responsive rendering for content authored in the editor. Two setup methods are available.

1. Editor Configuration

1.1 Via getPublishingHtml() option

Pass publishingResponsiveStyle: true when calling getPublishingHtml(). The returned HTML embeds the responsive <style> inline, so no external CSS changes are required.

editor.getPublishingHtml({ publishingResponsiveStyle: true });

Example output (Release 2.15.0+):

<div class="se-contents" style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.2;">
  <style type="text/css" data-seresponsive="true">
    .se-contents .se-scrollbox { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .se-contents .se-scrollbox::-webkit-scrollbar { display: none; }
    .se-contents .se-responsive.se-image .se-caption { max-width: 100% !important; }
    .se-contents .se-responsive.se-image,
    .se-contents .se-responsive.se-video { max-width: 100%; height: auto !important; }
    .se-contents .se-responsive.se-image > img,
    .se-contents .se-responsive.se-video > * { max-width: 100%; min-width: 10px; height: auto !important; }
    .se-contents .se-responsive.se-video .se-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; display: block; }
    .se-contents .se-responsive.se-video .se-video-wrapper > iframe { width: 100% !important; height: 100% !important; position: absolute; left: 0; }
  </style>
  <p>...</p>
</div>

For Release 2.14.7 and earlier, the video wrapper class is se-youtube-wrapper instead of se-video-wrapper.

1.2 Add responsive CSS to your page

Alternatively, drop the same CSS into the page that displays the editor's HTML output. No style tag is then embedded in the HTML, so you can change responsive behavior by editing the external stylesheet only.

.se-contents .se-scrollbox { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.se-contents .se-scrollbox::-webkit-scrollbar { display: none; }
.se-contents .se-responsive.se-image .se-caption { max-width: 100% !important; }
.se-contents .se-responsive.se-image,
.se-contents .se-responsive.se-video { max-width: 100%; height: auto !important; }
.se-contents .se-responsive.se-image > img,
.se-contents .se-responsive.se-video > * { max-width: 100%; min-width: 10px; height: auto !important; }
.se-contents .se-responsive.se-video .se-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; display: block; }
.se-contents .se-responsive.se-video .se-video-wrapper > iframe { width: 100% !important; height: 100% !important; position: absolute; left: 0; }

2. Applying Responsive Behavior While Editing

2.1 Images

Check Responsive in the image properties dialog. This automatically disables "Treat as text". Responsive images get max-width: 100% and resize with their container.

2.2 Tables

Check Responsive in Table properties > Advanced. This automatically disables "Treat as text". Responsive tables get the se-scrollbox class so they scroll horizontally on mobile.