Hide component is not working in responsive grid layout.

Question

I am using AEM 6.5. I want to hide the components in the page based on the device, but hide component feature is not hiding the component.

If I add my project component into we retail page and try hide component then it is getting hidden. I am not sure what we have missed. Could someone guide me what needs to be done?

I am using Editable templates

Bhuwan_B · Accepted Answer

Please check below community articles:https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/show-hide-component-option-for-responsive-grid-layout-in-aem-6-3/td-p/328282https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/configuring-responsive-layout.html?lang=en#specify-the-device-groups

BrianKasingli · Answer

@deepthikotegar,Hiding and showing HTML elements on the page based on the width of the device heavily relies on CSS. Using CSS media queries you can hide/show HTML elements on the page.Try and test the CSS examples below on your own HTML elements:  /** Desktop View When window is smaller than 1200px but above 960px **/        @media (min-width: 960px) and (max-width: 1200px){           .myDiv { display: none; }        }        /** Tablet View When window is smaller than 960px but above 768px  **/        @media (min-width: 767px) and (max-width: 960px){           .myDiv { display: none; }                }/** Mobile View When window is smaller than 767px but above 481px  **/        @media (min-width: 481px) and (max-width: 767px) {           .myDiv { display: none; }        }

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded