Show / Hide block based on device

On each block/list block, you have the option "Show the element on the page". This allows to remove enterely a block from a page (HTML of the block won't be written on the page) But sometimes, you will want to hide a block based on the device. As we serve HTML static files, this works differently. In the HTML of your block you need to add the tag [[hide]] as a CSS class to a wrapping element in your HTML. This will enable specific options in the BO:

Users can hide blocks based on the device. In the generated HTML, [[hide]] will be replaced by:

cms-hide-mobile +/ cms-hide-tablet +/ cms-hide-desktop

For exemple

<!-- Inside your HTML block -->
<div class="[[hide]] stripe stripe__light">
    <!-- My block content -->
</div>

<!-- 
If the users in the BO wants only to display on mobile, 
this will generate this HTML -->
<div class="cms-hide-tablet cms-hide-desktop stripe stripe__light">
    <!-- My block content -->
</div>

You can after you these classes to hide in CSS the block / use JS to remove the element from the DOM

As the block is hidden with css only, js script inside the block are still executed. So, if the script is injected a html content outside the disabled block, this one will still be visible.

Why should it be done in frontend (CSS or JS) and not in backend?

Galaxy serves static websites and the same HTML file for all user (mobile or desktop). After you click on the "Publish" button, the HTML files are generated and will be used for the live website.