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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

Not able to Resize the layout container

Avatar

Level 1

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

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

2 Replies

Avatar

Correct answer by
Level 6

@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

Level 7

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