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
BedrockMission!

Learn More

View all

Sign in to view all badges

Editable Template Layout container

Avatar

Avatar
Validate 10
Level 2
v1101
Level 2

Likes

4 likes

Total Posts

150 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 10
Level 2
v1101
Level 2

Likes

4 likes

Total Posts

150 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
v1101
Level 2

23-02-2021

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.

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

147 likes

Total Posts

157 posts

Correct Reply

53 solutions
Top badges earned
Validate 1
Applaud 25
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

147 likes

Total Posts

157 posts

Correct Reply

53 solutions
Top badges earned
Validate 1
Applaud 25
Ignite 3
Ignite 1
Give Back 5
View profile
Umesh_Thakur
MVP

24-02-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

Answers (2)

Answers (2)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

613 likes

Total Posts

590 posts

Correct Reply

231 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

613 likes

Total Posts

590 posts

Correct Reply

231 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

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

Avatar

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

159 likes

Total Posts

370 posts

Correct Reply

58 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

159 likes

Total Posts

370 posts

Correct Reply

58 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile
Ankur_Khare
MVP

23-02-2021

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