Learn how to configure new responsive breakpoints for AEM responsive Page Editor.
First, create media breakpoints in the AEM Responsive Grid CSS that the responsive AEM site adheres to.
/ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less file, create your breakpoints to be used together with the mobile emulator. Make note of the
max-width for each breakpoint, as this maps the CSS breakpoints to the AEM responsive Page Editor breakpoints.
ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml file and update
cq:responsive/breakpoints with your new breakpoint node definitions. Each CSS breakpoint should have a corresponding node under
breakpoints with its
width property set to the CSS breakpoint’s
AEM emulators must be defined that allow authors to select the responsive view to edit in the Page Editor.
Create emulators nodes under
/ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape. Copy a reference emulator node from
/libs/wcm/mobile/components/emulators in CRXDE Lite to and update the copy to expedite node definition.
Group the emulators to make them available in AEM Page Editor.
/apps/settings/mobile/groups/<name of device group> node structure under
.content.xml file in
/apps/settings/mobile/groups/<device group name> and define
the new emulators using code similar to the one below:
Lastly, map the device group back to the page template so the emulators are available in the Page Editor for pages created from this template.
ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml file and update the
cq:deviceGroups property to reference the new mobile group (for example,