Not able to resize the layout container after updated grid.less

[james_aem]

Hi

We have updated grid.less file as per our requirement. 

Version : 6.5.10

@Import (once) "/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);
}

/* Extra Small */
@media (max-width: 360px) {
.aem-Grid {
.generate-grid(xsmall, @max_col);
}
}

/* Small */
@media (min-width: 361px) and (max-width: 480px) {
.aem-Grid {
.generate-grid(small, @max_col);
}
}

/* Medium */
@media (min-width: 481px) and (max-width: 770px) {
.aem-Grid {
.generate-grid(medium, @max_col);
}
}

/* Large */
@media (min-width: 771px) and (max-width: 992px) {
.aem-Grid {
.generate-grid(large, @max_col);
}
}

/* Extra Large */
@media (min-width: 993px) and (max-width: 1200px) {
.aem-Grid {
.generate-grid(xlarge, @max_col);
}
}

Added breakpoints under template’s jcr:content node and able to see all the breakpoints and emulators under pageinfo.json , offset and width properties are created at each component under cq:responsive node.

http://localhost:4502/libs/wcm/core/content/pageinfo.json?path=page_path

[kautuk_sahni]

@james_aem 

There are a few possible reasons why you are not able to resize the layout container after updating grid.less in Adobe AEM 6.5.10:

1. The layout of the parent containers is not set to "Responsive Grid". Make sure that the layout of all parent containers is set to "Responsive Grid" in order for the layout container to be able to resize.
2. There is a conflict between your custom grid.less file and the AEM core grid.less file. Make sure that your custom grid.less file is importing the AEM core grid.less file and that your custom CSS is not overriding the AEM core CSS.
3. There is an issue with the generate-grid() function. The generate-grid() function is used to generate the CSS for the responsive grid. Make sure that the generate-grid() function is being called correctly and that the parameters are being passed in correctly.
4. There is a caching issue. Clear the AEM cache and try resizing the layout container again.

If you are still having problems resizing the layout container, you can try the following:

1. Inspect the CSS and HTML. Use a browser developer tool to inspect the CSS and HTML of the layout container. Make sure that the CSS is correct and that the HTML elements are being rendered correctly.
2. Debug the generate-grid() function. If you are able to debug the generate-grid() function, you can step through the function and see where the problem is occurring.
3. Contact Adobe support. If you are still having problems, you can contact Adobe support for assistance.

Here are some additional tips for troubleshooting responsive grid issues in AEM:

• Make sure that you are using the latest version of the AEM core grid.less file.
• Use the AEM Responsive Grid Editor to create and edit your responsive grids.
• Test your responsive grids in different browsers and devices.
• Use the AEM ClientLibrary Manager to manage your clientlibs.
• Clear the AEM cache frequently.

I hope this helps!