Different columns count for different breakpoints in responsive grid. | Community
Skip to main content
Ivan_Andrianovs
New Participant
Dec 13, 2018 12:17 PM UTC
Solved

Different columns count for different breakpoints in responsive grid.

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
arunpatidar
arunpatidarAccepted solution
New Participant
Dec 18, 2018 3:11 PM UTC

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 reply

5 replies

karanmahi
Level 4
Jan 11, 2021 2:12 AM UTC
Hi Ivan - Did you get the response? I have the same requirement to configure 6 columns for mobile and 12 for desktop and tablet
Translate
Ivan_AndrianovsAuthor
New Participant
Dec 19, 2018 7:51 AM UTC

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

Translate
arunpatidar
arunpatidarAccepted solution
New Participant
Dec 18, 2018 3:11 PM UTC

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.

Translate
Arun Patidar
Ivan_AndrianovsAuthor
New Participant
Dec 18, 2018 2:50 PM UTC

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.

Translate
arunpatidar
arunpatidar
New Participant
Dec 13, 2018 12:36 PM UTC

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, ...
Translate
Arun Patidar
Terms & ConditionsAccessibility statement

Loading footer...