Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Editable Template Layout container

Avatar

Level 5

Hi All - I have an editable template, in that I should have the full width Header and Footer Layout container in it and should have the parsys(Layout container) for the body section. It should have the specific width (Say 1300 px). How can we get the parses with the specific width (I know that we can use the responsive grid resizing but the requirement is to have the specific width.

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

yes you can handle with CSS but using the vanila css you should use bootstrap classes other wise when the page will open in small devices responsivness will be impacted.

you can use col-lg-sm, col-lg-md etc for this purpose.

 

hope this will help.

Umesh Thakur

View solution in original post

3 Replies

Avatar

Community Advisor

You need to achieve this through css.

Let entire page width be 1300 and stretch header and footer to full width like below-

 

@media screen and (min-width: 940px)
.fullwidth {
  1. left: 50% !important;
  2. margin-left: -50vw !important;
  3. position: relative !important;
  4. width: 100vw !important;
}

 

 

Avatar

Community Advisor

@v1101 one way is to edit your basepage.html (base page template), to wrap it around with <div class="container"></div>. With the container you can add CSS to change the max-width and sizing.

.container {
 width: 100%;
 max-width: 1300px;
 margin: 0 auto;
}

Avatar

Correct answer by
Community Advisor

yes you can handle with CSS but using the vanila css you should use bootstrap classes other wise when the page will open in small devices responsivness will be impacted.

you can use col-lg-sm, col-lg-md etc for this purpose.

 

hope this will help.

Umesh Thakur