While migrating our websites from AMS (AEM 6.5) to AEM as a Cloud, we noticed that responsive authoring for certain Editable templates wasn’t functioning as expected. Interestingly, these same templates were working flawlessly in the AMS environment.
Additionally, selecting the breakpoints was not functioning correctly.
This issue was not present in the AMS (6.5) environment, where both responsive authoring and breakpoint selection were functioning as expected.
After analysis, the root cause of the issue is the logic difference between AME 6.5 and AEM as Cloud for responsive authoring on /libs/cq/gui/components/authoring/editors/clientlibs/core.lc-0e2523ebda58d68c5bc85efa684b50e6-lc.min.js (the hash may vary if any additional changes introduced)
In AEM 6.5 — check if the configuration width is greater than or equal to the device width.
if(cfg[bp].width>=deviceWidth
getDeviceBreakpoint:function(deviceWidth){var cfg=this.getBreakpoints(),closestBp;for(var bp in cfg)if(cfg[bp].width>=deviceWidth&&(!closestBp||cfg[bp].width<=cfg[closestBp].width))closestBp=bp;return closestBp}In AEM as a Cloud — check if the configuration width is greater than the device width. This can lead to the selection of an incorrect breakpoint. Consequently, changes that should apply to the actual breakpoint, like small, end up being applied to a different one, such as medium.
if(cfg[bp].width>deviceWidth
getDeviceBreakpoint:function(deviceWidth){var cfg=this.getBreakpoints(),closestBp;for(var bp in cfg)if(cfg[bp].width>deviceWidth&&(!closestBp||cfg[bp].width<=cfg[closestBp].width))closestBp=bp;return closestBp}To address the issue, it is essential to ensure that the responsive configuration sets the breakpoints in emulators to one less than the standard breakpoint value (standard breakpoint value — 1). Additionally, within the editable template structure’s responsive configuration, the breakpoint value should be maintained at the standard breakpoint value.
For instance, in the configuration of the emulator for a large breakpoint: /apps/<Project>/emulators/bootstrap/large/cq:emulatorConfig, (width:1199)
In the responsive configuration of the template structure for large breakpoints (for better management enable these configurations through the template-type): /conf/<project>/settings/wcm/templates/<template>/structure/jcr:content/cq:responsive/breakpoints/large (width:1200)
You can examine the emulator and responsive configuration of a page using the PageInfo servlet — For example, https://aemhost/libs/wcm/core/content/pageinfo.json?path=%2Fcontent%2Ftest%2Fus%2Fen%2Ftest-page
Now, you can start editing the page to make it work well on different devices.