Different Component for same section for Desktop and Mobile

[peterw13024062]

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.

[smacdonald2008]

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.

[smacdonald2008]

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).