Expand my Community achievements bar.

Nomination window for the Adobe Community Advisor Program, Class of 2025, is now open!
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