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

Hide component is not working in responsive grid layout.

Avatar

Avatar
Level 1
deepthikotegar
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile

Avatar
Level 1
deepthikotegar
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile
deepthikotegar
Level 1

03-05-2021

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
Level 4
Bhuwan_B
Level 4

Likes

56 likes

Total Posts

58 posts

Correct Reply

18 solutions
Top badges earned
Establish
Give Back
Boost 50
Boost 5
Boost 3
View profile

Avatar
Establish
Level 4
Bhuwan_B
Level 4

Likes

56 likes

Total Posts

58 posts

Correct Reply

18 solutions
Top badges earned
Establish
Give Back
Boost 50
Boost 5
Boost 3
View profile
Bhuwan_B
Level 4

03-05-2021

Answers (1)

Answers (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

582 likes

Total Posts

564 posts

Correct Reply

218 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

582 likes

Total Posts

564 posts

Correct Reply

218 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

03-05-2021

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