AEM Grid Resize issue In authoring mode

[user06615]

I have added custom emulators, gridless, included emulators in the template, and added responsiveness settings on template.
But when I try to resize the grid, only the default desktop option is working in authoring as expected.
The custom mobile and tablet options are not working.

I want the responsiveness to reflect in author mode in both mobile and tablet breakpoints, similar to the default desktop breakpoint.

[EstebanBustamante · Accepted solution]

Hi, 

It sounds like something is not properly configured, or there are some missing CSS that could be preventing your breakpoints from rendering properly. I would suggest inspecting the page to check if the classes are being correctly appended when you switch between breakpoints. Then, ensure that the classes are correctly exposed (included as part of the client libraries). Finally, make sure the CSS classes are properly defined.

You can find a good guide on how to configure AEM Layouting mode here:

https://www.linkedin.com/pulse/putting-aem-responsive-grid-pieces-together-vimal-kumar/

https://levelup.gitconnected.com/aem-customize-emulators-in-layout-mode-288f951d96c5 

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/sites/authoring/... 

If you have any browser's console error, please post it back.

Hope this helps.

[user06615]

Hi @EstebanBustamante

 I have seen on weeknd site they have grid.scss on ui.frontend and that is imported as clientlib-site on page.
So is that something will be required in my case as well.

[EstebanBustamante]

Correct, please follow the guides i shared and you should be able to use properly the AEM Layout mode.

Hope this helps