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

Different columns count for different breakpoints in responsive grid.

Avatar

Avatar
Validate 1
Level 1
Ivan_Andrianovs
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Applaud 5
View profile

Avatar
Validate 1
Level 1
Ivan_Andrianovs
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Applaud 5
View profile
Ivan_Andrianovs
Level 1

13-12-2018

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

18-12-2018

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.

Answers (3)

Answers (3)

Avatar

Avatar
Validate 1
Level 1
Ivan_Andrianovs
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Applaud 5
View profile

Avatar
Validate 1
Level 1
Ivan_Andrianovs
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Applaud 5
View profile
Ivan_Andrianovs
Level 1

18-12-2018

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

Avatar

Avatar
Validate 1
Level 1
Ivan_Andrianovs
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Applaud 5
View profile

Avatar
Validate 1
Level 1
Ivan_Andrianovs
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Applaud 5
View profile
Ivan_Andrianovs
Level 1

18-12-2018

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

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

13-12-2018

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, ...