Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

Different Component for same section for Desktop and Mobile


Level 3

Hello AEM community,

Our frontend team has created Responsive pages for Desktop, Mobile and Tablet and now as an AEM developer we have a requirement to create components where one of requirement is to display a section on page  and that section should be displayed as: 

- paragraph on Desktop page

-  accordion on mobile

- and in Tabular format on Tablet

I am really looking for a solution as how this can be achieved in AEM.

Please note:  Content will be same for this section on desktop ,mobile and tablet and any content change for one device should be reflected for other two.

Thank you so much in advance.

2 Replies


Level 10

Response Layout renders HTML based on the device.

Responsive Layout

Components are added to the page during edit mode. Response Layout does not let you change components (added during Edit mode) based on the device.

I am looking to see if such a requirement has been addressed by internal AEM people.


Level 10

We got a reply from an AEM Expert:

AEM’s Responsive Grid + Template Editor allows you to show/hide components based on the viewport size; so they could achieve this by placing 3 components and only showing the appropriate per viewport.

Alternatively, to have a single component, they would need to implement a custom component that displays different views based on the viewport using CSS media selectors (I’d imagine).