Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Hide component is not working in responsive grid layout.

deepthikotegar
Level 1
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
Bhuwan_B
Correct answer by
Community Advisor
Community Advisor
2 Replies
BrianKasingli
Community Advisor
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; }
        }

 

 

 

Bhuwan_B
Correct answer by
Community Advisor
Community Advisor