In Editable template, how to set different columns for different breakpoints in responsive grid

Avatar

Avatar
Give Back 10
Level 3
karanmahi
Level 3

Likes

15 likes

Total Posts

73 posts

Correct reply

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

Avatar
Give Back 10
Level 3
karanmahi
Level 3

Likes

15 likes

Total Posts

73 posts

Correct reply

0 solutions
Top badges earned
Give Back 10
Give Back 5
Give Back 3
Give Back
Ignite 5
View profile
karanmahi
Level 3

11-01-2021

Hi.

In the editable template, can we configure the Responsive grid (wcm/foundation/components/responsivegrid) to have different columns number in different breakpoints?. E.g. I'd liked to have 12 columns in desktop and tablet and (6 in mobile). I tried this, but it doesn’t work. I have done two things.

1.  I have modified grid.less file to set 6 as max-columns for mobile breakpoint and 12 as default for desktop/tablet.

2.  In the root layout container, under the policy, I have set the no. of columns as 12 (by default)

Under layout mode in the template, I can do resizing for desktop/tablet for 12 columns, but when I switch to mobile breakpoint it shows 12 columns instead of 6 columns. Secondly under layout mode, on the mobile breakpoint, when I resize, it doesn’t stay. It goes back to the default position.

I saw another similar post, but that doesn’t have the answer. So trying again with more details.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/different-columns-count-fo...

Thanks in advance.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

154 likes

Total Posts

167 posts

Correct reply

55 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

154 likes

Total Posts

167 posts

Correct reply

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

11-01-2021

Hi @karanmahi,

I had similar kind of issue- to have different kind of layouts on desktop, tablet and mobile devices.  I handle it through simple css by generating the css class dynamically from the back end.

it was like:

Total Columns 10
Desktop Columns per row 4
Tablet Columns per row 3
Mobile Columns per row 2
TUmesh_0-1610424948049.png

Css class be :

<div class="col-lg__6-12 col-md__4-12 col-sm__4-12"></div>
<div class="col-lg__6-12 col-md__4-12 col-sm__4-12"></div>
<div class="col-lg__6-12 col-md__4-12 col-sm__4-12"></div>
<div class="col-lg__6-12 col-md__4-12 col-sm__4-12"></div>
 
device
  • desktop = lg
  • tablet = md
  • mobile = sm

Hope this will help.

Umesh Thakur

Answers (1)

Answers (1)

Avatar

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

586 likes

Total Posts

734 posts

Correct reply

246 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

586 likes

Total Posts

734 posts

Correct reply

246 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile
Vijayalakshmi_S
MVP

11-01-2021

Hi @karanmahi,

Try with change that you have done for grid.less file alone. (Configuring different column number for different breakpoint) and remove the columns set by default at policy level (of layout container component)

Also, cross verify if the change done on "grid.less file" is available in the compiled ".css" file