Layout issue

[Vani1012]

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.

Can anyone help me to fix this.

[Manu_Mathew_ · Accepted solution]

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

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

[aanchalsikka]

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.