Solved

Different columns count for different breakpoints in responsive grid.

Forum|Forum|7 years ago
December 13, 2018
5 replies
2421 views

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.

Best answer by arunpatidar

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.

arunpatidar

Community Advisor

Hi,

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

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

An example definition:

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

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

I

Ivan_AndrianovsAuthor

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.