Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Paragraph HTL - Components in containers do not line up when using content flex

Avatar

Level 1

Hi everyone!

 

I'm experiencing an issue when using containers in Paragraph HTL's in a Column Control Grid. When content flex isn't a selected property of the grid, the containers stack like normal (pictured on the right) even when there are an uneven number of containers in each column.

 

When content flex isn't enabled however, it is unresponsive and not compatible with mobile. When content flex is enabled, the containers in the column fill the paragraph HTL rather than stack.

Is there any way around this? Thanks!

 

Annotation 2024-01-03 120110.png

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi

 

This seems to be a 'CSS naming conflict.' Please be aware that the 'container' component will append the 'container' class to the main wrapper div. You can modify this behavior by updating the decoration tag configuration: Decoration Tag Configuration. However, my advice is to allow the 'container' class from AEM to function as needed and consider renaming any custom 'container' classes you may have.

 

You can easily check which classes are applied by inspecting the code.

Hope this helps.



Esteban Bustamante

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi

 

This seems to be a 'CSS naming conflict.' Please be aware that the 'container' component will append the 'container' class to the main wrapper div. You can modify this behavior by updating the decoration tag configuration: Decoration Tag Configuration. However, my advice is to allow the 'container' class from AEM to function as needed and consider renaming any custom 'container' classes you may have.

 

You can easily check which classes are applied by inspecting the code.

Hope this helps.



Esteban Bustamante