Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Layout mode for Tablet AEM 6.5

Avatar

Level 2

Hi,

 

Layout container is not allowing to resize the component for tablet view in layout mode.

Is there any configuration that needs to be set?

 

Thanks in advance !

 

Best Regards,

Kirti Khatri

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @kirtikhatri1,

Could you please confirm if breakpoints for Tablet is configured at template level or at desired page level.

If it is not, please do create by following the steps in below link. 

You can also take we-retail site as reference: We retail content page template.

  • /conf/we-retail/settings/wcm/templates/content-page/structure/jcr:content/cq:responsive

If the above is already done and issue exist, please share your sample template structure if possible for debugging further.

View solution in original post

7 Replies

Avatar

Correct answer by
Community Advisor

Hi @kirtikhatri1,

Could you please confirm if breakpoints for Tablet is configured at template level or at desired page level.

If it is not, please do create by following the steps in below link. 

You can also take we-retail site as reference: We retail content page template.

  • /conf/we-retail/settings/wcm/templates/content-page/structure/jcr:content/cq:responsive

If the above is already done and issue exist, please share your sample template structure if possible for debugging further.

Avatar

Level 2

HI Vijayalakshmi,    I had cross checked in we-retail, /conf/we-retail/settings/wcm/templates/content-page/structure/jcr:content/cq:responsive , The same is there in my template structure ie. /conf/<project_name>/settings/wcm/templates/home-page/structure/jcr:content/cq:responsive/breakpoints/tablet. The difference that I noticed is , I have grid.less in /apps/<project_name>/clientlibs/clientlib-grid and I had added it in page policy of template whereas in we-retail, they have grid.less in clientlib-site. So, like as of now, in phone view in layout mode, I can resize my component but not in iPad view. I am still not able to figure out what is wrong with it.   

Avatar

Community Advisor

Hi @kirtikhatri1,

Can you check on the below.

  • Have network tab enabled as you load the page in Layout mode and filter with ".css" files and look for your CSS file -> check if contents of grid.less is available in the complete CSS file. 
  • Compare the contents of your project specific grid.less file with one in we.retail site. (To check if there is any typo in tablet specific block as the same is working fine in phone view)
  • Include the file the way it is included in we-retail site (clientlib-site -> this category is embedded in clientlib-base which is then included in page component -> customheaderlibs.html)

If still no luck, share the grid.less file if possible for further debugging.

 

Avatar

Level 2

Hi Vijayalakshmi, I tried what you suggested but still issue is same. So like I am attaching grid.PNGgrid.less file here :

Avatar

Community Advisor

Hi @kirtikhatri1,

Project specific grid.less file seems to same as the one used in we-retail. 

One final check to narrow down, be in we-retail site page and try adjusting the layout in Tablet view. (This is to check if issue is at instance level or project specific)

Avatar

Level 2
Hi Vijayalakshmi, Yes I tried this, I am able to resize component in ipad view in one of the page of we-retail.

Avatar

Community Advisor

Hi @kirtikhatri1,

Cross check the steps followed to configure Layout Container once again completely.

Also check if there is any clash with other CSS class part of project targeting the same media query.