In AEM Editable template, Responsive authoring not working for custom breakpoints

Avatar

Avatar

karanmahi

Avatar

karanmahi

karanmahi

07-01-2021

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);

    }

}

 

 

 

image.png

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Vijayalakshmi_S

MVP

Avatar

Vijayalakshmi_S

MVP

Vijayalakshmi_S
MVP

08-01-2021

Hi @karanmahi,

Could you please let know

  • If the new breakpoint added at template level is not available in emulator at first place or it is available but you are not able to see it activating for devices within that range while authoring?
  • After adding at editable template level, are you authoring in template or page?

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) 

Answers (0)