Hide component is not working in responsive grid layout.

[deepthikotegar]

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

[BrianKasingli]

@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; }
        }

[Bhuwan_B · Accepted solution]

Please check below community articles:

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/show-hide-component-option...

https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/configuring-r...