Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Hide component is not working in responsive grid layout.

Avatar

Level 1

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
2 Replies

Avatar

Community Advisor

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

 

 

 

Avatar

Correct answer by
Community Advisor