Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Give Back 10
Level 3
karanmahi
Level 3

Likes

15 likes

Total Posts

73 posts

Correct Reply

0 solutions
Top badges earned
Give Back 10
Give Back 5
Give Back 3
Give Back
Ignite 5
View profile

Avatar
Give Back 10
Level 3
karanmahi
Level 3

Likes

15 likes

Total Posts

73 posts

Correct Reply

0 solutions
Top badges earned
Give Back 10
Give Back 5
Give Back 3
Give Back
Ignite 5
View profile
karanmahi
Level 3

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
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

564 likes

Total Posts

706 posts

Correct Reply

234 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

564 likes

Total Posts

706 posts

Correct Reply

234 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile
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)