search

adobe / aem-guides-wknd

Tutorial Code companion for Getting Started Developing with AEM Sites WKND Tutorial
https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-develop/overview.html
MIT License
285 stars 550 forks source link

Layout resizing is not working in tablet/phone. Working on desktop only. #277

Open Sravan246 opened 3 years ago

Sravan246 commented 3 years ago

Expected Behaviour

Layout resizing should work in desktop/pad/phone.

Actual Behaviour

Layout resizing not working in pad/phone. Working in desktop only.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Navigate to http://localhost:4502/editor.html/content/wknd/language-masters/en/about-us.html click on the Emulator and select Ipad/ipad retina. Select "Title" component and click on "layout" option in the toolbar. Try to resize the 12 column to 6 column.

Platform and Version

AEM 6.5.7

Sample Code that illustrates the problem

Logs taken while reproducing problem

davidjgonzalez commented 3 years ago

@Sravan246 I believe the quick-fix here is to set @screen-small: 768px; in /apps/wknd/clientlibs/clientlib-grid/less/grid.less

Here's what was going on:

When selecting the iPad Retina emulator in Layout Mode in PageEditor (which is width 768px) layout mode does not work (it snaps back). Here's a synopsis of the underlying problem:

So, when iPad Retina emulator is selected, the "phone" breakpoint is resolved, and the Layout changes are persisted to the component's cq:responsive/phone node (since iPad Retina's 768px <= Template's cq:responsive/breakpoints/phone@width=768

However, the AEM Grid CSS for the "phone" breakpoint reacts when the viewport is <=767px, which 768px is not, therefor the persisted values on the component's cq:responsive/phone node are being ignored.

Aligning the CSS's max-width and the breakpoints max-width both to 768px resolves this conflict.

I had to make a minor fix to the Header XF too to keep it rendering properly.

I will create an issue for a follow-up alignment of the AEM Grid, Breakpoints and Emulators. There's a little bit of a disconnect in the WKND's current setup between: