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

Avatar

Avatar

karanmahi

Avatar

karanmahi

karanmahi

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

Umesh_Thakur

MVP

Avatar

Umesh_Thakur

MVP

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

Vijayalakshmi_S

MVP

Avatar

Vijayalakshmi_S

MVP

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