Editable Template Layout container | Community
Skip to main content
V
v1101
Level 5
February 24, 2021
Solved

Editable Template Layout container

  • February 24, 2021
  • 3 replies
  • 1365 views

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.
Best answer by Umesh_Thakur

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

Ankur_Khare
Community Advisor
Ankur_KhareCommunity Advisor
Community Advisor
February 24, 2021

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;
}

 

 

    BrianKasingli
    Community Advisor and Adobe Champion
    BrianKasingliCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    February 24, 2021

    @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
      Community Advisor
      Umesh_ThakurCommunity AdvisorAccepted solution
      Community Advisor
      February 25, 2021

      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

        Terms & ConditionsAccessibility statement

        Loading footer...