Layout resizing is not happening in AEM

[NaveenT1]

I'm trying to do resizing of two containers which are responsive but they are not resizing.

I'm using cloud instance ( 2023.6.12255.20230608T053118Z-230400).

[Mahedi_Sabuj]

Hi @NaveenT1,

It seems that Responsive CSS hasn't been integrated into the template.

You can refer to Step 5 outlined in this resource for guidance

https://www.linkedin.com/pulse/putting-aem-responsive-grid-pieces-together-vimal-kumar/ 

Same problem also discussed here: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/not-able-to-resize-the-lay... 

[EstebanBustamante]

This is mainly for 2 reasons:
1) The CSS is not set as mentioned before, you can check here about how to add the less file with your corresponding breakpoints https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/configuring-r...

2) The breakpoints are not set in your template https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/configuring-r... 

[Harwinder-singh · Accepted solution]

@NaveenT1  Is this happening on a vanilla instance or with your custom code installed ?

If it is custom, you may want to check if any custom CSS class that is causing this.

Also, since this is a nested container, you might want to check this article as well : 

https://www.albinsblog.com/2023/02/responsive-layouts-not-working-for-nested-containers-aem.html