Adapt Learning Community: Hide block

How do I hide a block with CSS?

I want one block for mobile and one for full width!

You'd be better off using adapt-hide; hiding via CSS alone would cause you progress bar/tracking problems as the course wouldn't know the user didn't have to complete that block.

The README for adapt-hide refers only to components but looking at the code I see no reason why it wouldn't also work on articles and blocks as well.

Show parent | Reply

Sorry it didn´t work! It hides the whole page!

Show parent | Reply

How did you configure it?

Show parent | Reply

I just added the

"_hideOn": "small" to one of the components or blocks

and

"_hideOn": "medium large" to the other. Like this:

{
"_id": "b-45",
"_parentId": "a-11",
"_type": "block",
"_classes": "",
"_hideOn": "small",
"title": "",
"displayTitle": "",
"body": "",
"_trackingId": 13
},

Show parent | Reply

I have just pushed an update to it, maybe update and try again?

It's definitely working for me; using the out-of-the-box content I applied "_hideOn": "small" to b-05 and "_hideOn": "medium large" to b-10.

adapt hide on desktop

adapt hide on small screen

Show parent | Reply

The same result as before!

Show parent | Reply

Hmm sorry I don't know what to suggest, like I say it worked great for me...

Show parent | Reply

With some small adjustments this will work!

.component.narrative-component {
&.c-5182 {
display: none;
padding-top: 0px !important;
}
}
@media all and (max-width:@device-width-small) {
.component.narrative-component {
&.c-182 {
display: none;
padding-top: 0px !important;
}
&.c-5182 {
display: block;
}
}
}

Show parent | Reply