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

[Sravan246]

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]

@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:

• In WKND grid.less, there "phone" breakpoint had a max-width of 767px.
• The WKND's templates cq:responsive breakpoint for "phone" had a width of 768px.
• The iPad Retina emulator has a width of 768px

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:

• AEM Grid definition
• Defined breakpoints (including their naming)
• How the breakpoints are "accessible" in the page editor (ie. the only Emu Device bigger than the Smaller Screens, is Desktop)