Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Decoration tag - AEM Grid Class missing for mobile view

abhisheknarula2
Level 2
Level 2

When we create a component using Touch UI, it is wrapped by a decoration tag which consists of AEM Grid classes like aem-GridColumn--tablet--12, aem-GridColumn--phone--8, aem-GridColumn--default--8 as below:

Decoration tag:

<div class="title-component aem-GridColumn--tablet--12 aem-GridColumn--phone--8 aem-GridColumn aem-GridColumn--default--8">

     Title Component HTML

</div>

But there is one class missing on this decoration tag for mobile view i.e. aem-GridColumn--phone--12

due to which it is taking width: 66.6% as below:

.aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--8 {

    float: left;

    clear: none;

    width: 66.66666667%;

  }

If aem-GridColumn--phone--12 class was available, then it would have taken full width like:

.aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--12 {

    float: left;

    clear: none;

    width: 100%;

  }

Is anyone facing this same issue?

4 Replies
Hemant_arora
Level 8
Level 8

I see the class loading in mobile. Not able to understand the issue.

1427971_pastedImage_0.png