Responsive screen

General
3

Hello @Francesco_Ambrosoli

Welcome to the community!
You can get it by adding a new AppExtension and using CSS/Less you can describe which blocks should be visible or hidden.

Here is an example:

@media (max-width: @appLayoutMaxPhoneWidth) {
  .hide-mobile {
    display: none !important;
  }
}
  
@media (min-width: @appLayoutMinTabletWidth) and (max-width: @appLayoutMaxTabletWidth) {
  .hide-tablet {
    display: none !important;
  }
}
  
@media (min-width: @appLayoutMinDesktopWidth) {
  .hide-desktop {
    display: none !important;
  }
}

UI Builder - Backendless 2021-03-23 13-16-51
UI Builder - Backendless 2021-03-23 13-16-512615×1247 239 KB

and then add these classes to blocks you need:

UI Builder - Backendless 2021-03-23 13-18-05
UI Builder - Backendless 2021-03-23 13-18-051032×1246 59.4 KB

demo app: https://backendlessappcontent.com/7E25B48A-05FA-0B5D-FFAE-63CC0AC26C00/E9920D04-8F81-D6EC-FFBB-4D4D78486100/files/ui-builder/containers/default/index.html?page=adaptive

Regards, Vlad

1 Like