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
Solved! Go to Solution.
Views
Replies
Total Likes
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; }
}