Having an option to hide element on desktop / mobile

[lbajsarowicz]

Description (*)

As a marketer, I want to hide some elements in specific version of the website ( mobile / desktop ) to reduce the UI overload in Mobile.

Expected behavior (*)

I select on which screens I would like to see the element (all / mobile only / desktop only) and this way PageBuilder generates correct CSS class applied to the element.

Currently I cannot even do it on my own as PageBuilder adds display: flex to elements.

Benefits

Possibility of customizing the views for desktop / mobile.

Additional information

[lbajsarowicz]

The hardcoded display: flex is still there for latest develop branch from magento2-page-builder repository:

<div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px 0px 10px; padding: 10px;"><div class="pagebuilder-column-group" style="display: flex;" data-content-type="column-group" data-grid-size="12" data-element="main"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; width: 100%; margin: 0px; padding: 10px; align-self: stretch;"></div></div></div></div>

[tkacheva]

@lbajsarowicz can you share couple of the most common examples of hiding elements on mobile?

[lbajsarowicz]

@tkacheva

1. Due to the fact there is no responsiveness support you can have two versions of the grid - one for the desktop, other for the mobile

Additionally

1. Instead of loading heavy snippet (For example map), you can use responsive image. This way the image is hidden for desktop, and map is hidden for mobile.
2. You can hide video for mobile, displaying image with link, while for desktop showing the video.

Also there are some elements that you don't want to be visible on mobile at all, to reduce the length of the page - eg. some decorators, some blocks or footer navigation. The example can be "promoted product" block in mega menu.

My use case is that I have 3-column navigation and I want to show the block in MegaMenu but for desktop to have all the menu visible, while for mobile only 2 levels visible, but still being able to make this editable by the client.

[omiroshnichenko]

As I mentioned in another issue, the inline style problem has been solved in the scope of the #558. You will be able to define classes in your customization for different media queries and use them on content where you need this behavior. But, it totally makes sense to provide the ability to show/hide content types on different viewports using UI. Thanks again for the report.