Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session
SOLVED

AEM Responsive Grid for 4 column images

Avatar

Level 2

Hi Team, i am trying to recreate the four column images in desktop view and images wrapped into 2 rows like 2 images in first column and 2 images in second row..
 can we achieve this with the responsive grid layout in aem or with style systems?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@ArchR 

 

You can utilize the layout + responsive grids to have different layouts for different devices.

- 4 images in a row for desktop

- 2 images in 2 rows for tablet

 

Example is explained on https://www.youtube.com/watch?v=n4lPKQmmRSc

 

Same class will be applied in all modes via Style system. Hence, use it to further fine tune the UI based on breakpoints


Aanchal Sikka

View solution in original post

2 Replies

Avatar

Community Advisor

@ArchR You can actually test it out in responsive grid layout as explained in below article

https://www.velir.com/ideas/2022/11/29/how-aem-puts-responsive-design-in-your-hands

or you can write custom css to different form factors.

Avatar

Correct answer by
Community Advisor

@ArchR 

 

You can utilize the layout + responsive grids to have different layouts for different devices.

- 4 images in a row for desktop

- 2 images in 2 rows for tablet

 

Example is explained on https://www.youtube.com/watch?v=n4lPKQmmRSc

 

Same class will be applied in all modes via Style system. Hence, use it to further fine tune the UI based on breakpoints


Aanchal Sikka