We are on AEM 6.5.3 and working on setting up the responsive authoring for a desktop and large desktop. We did two things.
1. We have modified the grid.less for desktop and large desktop breakpoint. (code is below)
2. And added the respective breakpoint responsive node at the template for desktop and large desktop breakpoint.
But while doing responsive authoring, I can author only in the phone, tablet, and default mode.
Can anybody please provide any pointers to do responsive authoring for a desktop and large desktop?
below is the grid file, here you can see I have defined desktop and large desktop breakpoints. And I have the same nodes at the template.
@Import "/libs/wcm/foundation/clientlibs/grid/grid_base.less";
/* maximum amount of grid cells to be provided */
@max_col: 12;
/* default breakpoint */
.aem-Grid {
.generate-grid(default, @max_col);
width: auto;
}
/* phone breakpoint */
@media (max-width: 600px) {
.aem-Grid {
.generate-grid(phone, @max_col);
}
}
/* tablet breakpoint */
@media (min-width: 600px) and (max-width: 768px) {
.aem-Grid {
.generate-grid(tablet, @max_col);
}
}
/* small desktop breakpoint */
@media (min-width: 768px) and (max-width: 1024px) {
.aem-Grid {
.generate-grid(desktop, @max_col);
}
}
/* medium desktop breakpoint */
@media (min-width: 1024px) and (max-width: 1280px) {
.aem-Grid {
.generate-grid(lg-desktop, @max_col);
}
}
Solved! Go to Solution.
Views
Replies
Total Likes
Hi @karanmahi,
Could you please let know
In the screenshot, could see cq:responsive node is added under responsivegrid node too. This is not needed.
It is needed either in ../structure/jcr:content/(for template or template-type level) or ../pagepath/jcr:content (for page level)
Hi @karanmahi,
Could you please let know
In the screenshot, could see cq:responsive node is added under responsivegrid node too. This is not needed.
It is needed either in ../structure/jcr:content/(for template or template-type level) or ../pagepath/jcr:content (for page level)
Views
Replies
Total Likes
Hi,
For device range greater than 1280px (for large desktop per your grid definition), we need to create custom emulator.
Reason:
cq:deviceGroups property that we would have mentioned in /template/structure/jcr:content and in root page jcr:content is pointing to OOB path - /etc/mobile/groups/responsive
We need to create similar one -> add custom emulators -> use the newly created path for cq:deviceGroups.
Steps to do the same is clearly documented with screenshots and sample code in https://levelup.gitconnected.com/aem-customize-emulators-in-layout-mode-288f951d96c5
Views
Replies
Total Likes
Views
Likes
Replies