Not able to Resize the layout container | Community
Skip to main content
M
mvelicheti
Level 2
March 1, 2023
Solved

Not able to Resize the layout container

  • March 1, 2023
  • 2 replies
  • 840 views

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.

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 Rohit_Utreja

@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-responsive-layout.html?lang=en

 

I hope it helps. 

2 replies

Rohit_Utreja
Community Advisor
Rohit_UtrejaCommunity AdvisorAccepted solution
Community Advisor
March 1, 2023

@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-responsive-layout.html?lang=en

 

I hope it helps. 

    aanchal-sikka
    Community Advisor
    aanchal-sikkaCommunity Advisor
    Community Advisor
    March 2, 2023

    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-responsive-layout.html?lang=en#include-the-responsive-css 

     

     

     

    Aanchal Sikka
      Terms & ConditionsAccessibility statement

      Loading footer...