Not able to Resize the layout container

[mvelicheti]

Hi,

I am trying to resize the layout container in my template but it's not changing. Is it mandatory to add grid.less file into our project to achieve responsiveness? Can anyone please help.Thank you.

[Rohit_Utreja · Accepted solution]

@mvelicheti 

Inside the structure node of a template, create a new node cq:responsive and define breakpoints.

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

Reference URL

https://experienceleague.adobe.com/docs/experience-manager-64/administering/operations/configuring-r...

I hope it helps. 

[aanchal-sikka]

Hello @mvelicheti 

We should probably check following settings:

1. The layout of the parent containers should be set to "Responsive Grid" . its available in Dialog of Container component

2. cq:responsive and breakpoints should be set, as suggested by @Rohit_Utreja 

3. Verify that you have not modified anything in grid.less. If yes, try replacing it back with original or validate against sample WKND site.

https://experienceleague.adobe.com/docs/experience-manager-64/administering/operations/configuring-r...