Core Components - Container | Grid Question | Community
Skip to main content
M
mrobinson-1
Level 3
September 11, 2019

Core Components - Container | Grid Question

  • September 11, 2019
  • 2 replies
  • 3426 views

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:

vs.

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
September 12, 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;

}

Arun Patidar
M
mrobinson-1Author
Level 3
September 12, 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?

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
September 14, 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

Arun Patidar
G
gbanez31
November 15, 2021

Hi @mrobinson-1 We are encountering this issue as well. Did you happen to find a solution to address this?

There doesn't seem to be a good way for the inner .cmp-container's max-width to align w/ the grid columns.

Terms & ConditionsAccessibility statement

Loading footer...