Adobe Experience Manager Sites & More

View profile · 19-09-2020

Hi I have 3 components and I want to add them all in thee columns in a page. But when I do drag the layout frame left or right it again takes the full page. Layout frame is not remain in same position.

View profile · 20-09-2020

Resizing won't work by default, you need to add grid.less file in your client library.

Can you please try by placing below script.

@Import "/etc/clientlibs/wcm/foundation/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

@grid-gutter-width: 24px;
 
/* default breakpoint */
.aem-Grid {
    .generate-grid(default, @max_col);
    width: auto;
}
 
/* phone breakpoint */
@media (max-width: 650px) {
    .aem-Grid {
        .generate-grid(phone, @max_col);
    }
}

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

.aem-GridColumn {
    padding: 0 @Grid-gutter-width/2;
}

/* TODO: find a better place for this */
/* additional styling for components in grid */ 

.aem-GridColumn.text.parbase p {
    *padding: 0 20px;
    text-align: justify;
}