- Overview
- Page Authoring
- Components
- Content Fragments
- Experience Fragments
- Developing
- AEM Project Archetype
- Getting Started with AEM Sites
- Getting Started with AEM Headless
- Getting Started with AEM SPA Editor and React
- Extending Page Properties
- Responsive breakpoints
- Developing with the Style System
- Style System Best Practices
- Developing for Page Difference
- Implementing Simple Search
- Social Media Sharing
- Customizing Component Icons
- Personalization
- SEO
- Single Page Applications
- Multi Site Management
- Introduction to Language Copy
- Live Copy and Blueprint
- Create a Live Copy
- Manage Live Copy inheritance on a component
- Manage Live Copy inheritance on a page
- Live Copy overview console
- Create a Language Copy
- Translation Projects
- Create a multi-lingual Translation Project
- Translation Jobs
- Updating a Language Copy with Launches
- Create a Language Copy page
- Translation Job status
- Create a country site from Language Copy
- Translation
- Integrations
- Experience Platform
- Experience Platform Data Collection Tags (Launch)
- Adobe Client Data Layer
- Analytics
- Adobe Target
- Overview
- Add Target extension to Launch Property
- Load and fire a Target call
- Create Adobe Target Cloud Service account
- Export Experience Fragments to Adobe Target
- Create Target Activity using Experience Fragment Offers
- Personalization using Visual Experience Composer
- Personalization of full web page experience
- Expert Resources
Responsive breakpoints
Learn how to configure new responsive breakpoints for AEM responsive Page Editor.
Create CSS breakpoints
First, create media breakpoints in the AEM Responsive Grid CSS that the responsive AEM site adheres to.
In /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.
Customize the template’s breakpoints
Open the 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 max-width.
Create emulators
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/<app name>/emulators
For example, /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.
Create device group
Group the emulators to make them available in AEM Page Editor.
Create /apps/settings/mobile/groups/<name of device group> node structure under /ui.apps/src/main/content/jcr_root.
Create a .content.xml file in /apps/settings/mobile/groups/<device group name> and define
the new emulators using code similar to the one below:
Update the template’s device group
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.
Open the 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, cq:deviceGroups="[mobile/groups/customdevices]")
Business.Adobe.com resources
Resources
Adobe Account
