Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Different columns count for different breakpoints in responsive grid.

Avatar

Level 1

Hi Community.

Is it possible to configure Responsive grid (wcm/foundation/components/responsivegrid) component to have different columns number in different beakpoints?. E.g. I'd liked to have 12 columns in desktop, 6 for tablet and 4 for mobile. As I see back-end and front-end code is ready for that, but I didn't found how to configure it.

Thanks in advance.

BR, Ivan

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

I am not sure if this is possible, you can set the width though, why don't you divide 12 grid into equal parts and setup width for mobile and tablet.



Arun Patidar

View solution in original post

5 Replies

Avatar

Community Advisor

Hi,

Could you please check Configuring Layout Container and Layout Mode   if helps?

Configuring Breakpoints using XML

Breakpoints are located inside the <jcr:content> section of the .context.html under the appropriate template (or content) folder.

An example definition:

1

2

3

4

5

6

<cq:responsive jcr:primaryType="nt:unstructured">

  <breakpoints jcr:primaryType="nt:unstructured">

    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>

    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>

  </breakpoints>

</cq:responsive>

Configure the Grid of the Layout Container

You can configure the number of columns available for each specific instance of layout container:

Definitions for the responsive grid are specified in:etc/design/<your-project-name>/.content.xml

The following parameters can be defined:
  • Number of columns available:
    • columns="{String}8"
  • Components that can be added to the current component:
    • components="[/libs/wcm/foundation/components/responsivegrid, ...


Arun Patidar

Avatar

Level 1

Thank you for your response. Actually, I need to define different columns for  mobile (4) and tablet (12) breakpoints for the same responsive grid component.

Avatar

Correct answer by
Community Advisor

Hi,

I am not sure if this is possible, you can set the width though, why don't you divide 12 grid into equal parts and setup width for mobile and tablet.



Arun Patidar

Avatar

Level 1

I'd liked to forbid authors to break up the design. Anyway, thank you for your reply.

Avatar

Level 4
Hi Ivan - Did you get the response? I have the same requirement to configure 6 columns for mobile and 12 for desktop and tablet