Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Layout issue

Avatar

Level 8

Hi Team,

There are many issues with the layout.

On the template level, there's an overflow of the containers on the right

Vani1012_1-1676387270306.png

 

When I try to do layout on the smaller screen (tablet) the container is not even fully visible in the section.

Vani1012_0-1676387177966.png

Vani1012_2-1676387443788.png

 

Grid.less file having this code

/*
* Copyright 2018 Adobe Systems Incorporated
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
.generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
.aem-Grid {
.generate-grid(phone, @max_col);
}
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
.aem-Grid {
.generate-grid(tablet, @max_col);
}
}

/* force showing hidden components in unhide mode */
.aem-GridShowHidden > .cmp-container > .aem-Grid > .aem-GridColumn {
display: block !important;
}

Can anyone help me.

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You need to make sure your device emulators are working as expected, AEM: Customize emulators in layout mode | by Theo Pendle | Level Up Coding (gitconnected.com), and making sure that the page is actually calling your aemGrid CSS document. 

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

You need to make sure your device emulators are working as expected, AEM: Customize emulators in layout mode | by Theo Pendle | Level Up Coding (gitconnected.com), and making sure that the page is actually calling your aemGrid CSS document.