Highlighted

Core Components - Container | Grid Question

robinsonm

11-09-2019

When using the Core Component "Container" is there a way to restrict the width of the content area, which in turn, will affect the width of the AEM Layout Grid?

See attached screens for current vs. desired results:

1831347_pastedImage_0.png

vs.

1831348_pastedImage_1.png

This can currently be achieved by placing one container in another container, but that is not elegant/ideal. The width is being set by putting "max-width:1200px" on the .cmp-container class.

Any thoughts or suggestions would be appreciated!

Replies

Highlighted

Arun_Patidar

MVP

12-09-2019

yes, you can do it with CSS only.

use parent class to restrict container size.

e.g.

body.page-class-name{

max-width:1200px;

}

Highlighted

robinsonm

12-09-2019

Hi Arun,

One thing I am trying to accomplish, however, is the ability to have the background color/image of the Container component span 100% the width of the page, but constraining the content area to 1200px, along with the Layout grid.

The top image is just setting the content area to 1200px, but doing that does not constrain the grid. Only by placing another container inside of that max-width:1200px content area is the Layout grid constrained.

Does that make sense?

Arun_Patidar

MVP

14-09-2019

Hi,

OOTB, the CSS rules for Grid are written, if we add components inside a responsive grid then only CSS rules will be applied to set the width. You can update or write rules to apply the same within the container as well.

e.g.

.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--12

Highlighted

robinsonm

18-09-2019

Hi Arun,

The problem with the Container seems to be that in order for the background to extend 100% of the page, the Container component itself needs to do the same, and since the root layout container is controlling how the grid gets laid out, the grid overlays on the Container, at 100% the width of the page. Any time I try to override, it does not take the changes. See screenshots. As you can see, I want the Grid to be overlayed on the 'cmp-container__content' div and not 'cmp-container'

1834313_pastedImage_0.png

1834314_pastedImage_1.png

.cmp-container{

    .cmp-container__content{

        &.responsivegrid.aem-GridColumn.aem-GridColumn--default--12{

            @media (min-width: $screen-sm-min) {

                 max-width: $container-sm;

             }

             @media (min-width: $screen-md-min) {

                 max-width: $container-md;

              }

             @media (min-width: $screen-lg-min) {

                 max-width: $container-lg;

              }

              margin:0 auto;

        }

    }

}