Editable Template Layout container | Community
Skip to main content
Level 5
Feb 24, 2021 3:03 AM UTC
Solved

Editable Template Layout container

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.

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Umesh_Thakur
Umesh_ThakurAccepted solution
New Participant
Feb 25, 2021 4:21 AM UTC

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

3 replies

Umesh_Thakur
Umesh_ThakurAccepted solution
New Participant
Feb 25, 2021 4:21 AM UTC

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

Translate
BrianKasingli
New Participant
Feb 24, 2021 10:14 AM UTC

@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; }
Translate
Ankur_Khare
New Participant
Feb 24, 2021 4:55 AM UTC

You need to achieve this through css.

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

 

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

 

 

Translate