Expand my Community achievements bar.

Product grid high speed doors

Avatar

Level 1

Where can i find the product grid for high speed doors in AEM? I want to make some adjustments. 

1 Reply

Avatar

Level 6

To adjust the product grid maybe you'll need to modify the responsive grid system. Here's how to approach it:

  • Customize Grid Breakpoints: Front-end developers can modify breakpoints (e.g., mobile/desktop widths) by editing the grid.less file. This allows alignment with UX-defined layouts
  • Adjust Gutter Spacing by adding padding to grid columns using CSS. For example:
.aem-GridColumn:not(.container) {
       padding: 0 8px; /* Default gutter */
   }
   @media (min-width: 768px) {
       .aem-GridColumn:not(.container) {
           padding: 0 16px; /* Larger gutter for desktop */
       }
   }

This should ensure consistent spacing across components

  • AEM’s grid uses fluid layouts (percentages) for responsiveness. Ensure templates and components are configured to adapt to screen sizes: AEM Responsive Grid System