Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Editable Template Layout container

v1101
Level 5
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
Umesh_Thakur
Correct answer by
Community Advisor
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
Ankur_Khare
Community Advisor
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;
}

 

 

BrianKasingli
Community Advisor
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;
}
Umesh_Thakur
Correct answer by
Community Advisor
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