Why no ability to hide a component only on desktop devices, still visible for others?

[funtimesutah]

This would seem like a pretty basic responsive design requirement, the ability to hide an element for one breakpoint and have it still visible for another. Why in AEM if I hide an element for Desktop, is it automatically hidden for all other breakpoints? AEM seems to really be behind the curve with this one when compared to other CMS systems.

[Shashi_Mulugu · Accepted solution]

@funtimesutah

AEM in general implementations, uses dispatcher to cache html which will be served to all requests be it a mobile or desktop.  So no Dynamic html delivery is OOTB

 An ability to show hide an html element based on device can be achieved in two ways:

1. With proper responsive html design wherein the html elements for all breakpoints will be present and using responsive css will show hide needed html elements.

2. Use Dynamic components using Sling Dynamic Include and load Dynamic components and implement logic at component level to detect device and execute html rendering.

My choice is option 1.

[arunpatidar]

Hi,

AEM does provide a feature to hide and show components based on viewport width. Just select a view port and apply show/hide.

If you want hide something in desktop view then hide on desktop and you need to apply show in mobile if you want to show that in mobile view, otherwise component will be hidden for that view as well.