Layout mode for Tablet

[kirtikhatri1]

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

[Vijayalakshmi_S · Accepted solution]

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. 

• https://docs.adobe.com/content/help/en/experience-manager-65/administering/operations/configuring-re...

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.

[kirtikhatri1]

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.   

[Vijayalakshmi_S]

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.

[kirtikhatri1]

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

[Vijayalakshmi_S]

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)

[kirtikhatri1]

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

[Vijayalakshmi_S]

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.