Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Not able to Resize the layout container

Avatar

Level 2

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

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

Avatar

Community Advisor

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

aanchalsikka_0-1677735200800.png

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

 

 

 


Aanchal Sikka