Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Layout issue

Avatar

Level 8

Hi,

I have set breakpoints at templates for mobile and tablet like this

@max_col: 12;

/* default breakpoint */
.aem-Grid {
.generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
.aem-Grid {
.generate-grid(phone, @max_col);
}
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
.aem-Grid {
.generate-grid(tablet, @max_col);
}
}

When I try to resize the component the controls are unstable (jumping too much) and not very usable for editors.layout issue.gif

Can anyone help me to fix this.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Vani1012 Looks like a product issue, you may need to raise an Adobe support ticket for this.

https://helpx.adobe.com/contact/support.html

 

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

@Vani1012 Looks like a product issue, you may need to raise an Adobe support ticket for this.

https://helpx.adobe.com/contact/support.html

 

Avatar

Level 2

Hello @Vani1012 

 

Please try to first use the

  • grid.less that would be created from latest maven archetype.
  • Or try we.retail site first (with no custom code) on AEM instance.

 

That would help you understand, if its an AEM issue, or some modification is grid.less/project-specific CSS thats causing it.