Responsive screen

General
6

Hi @Thomas_Vandergraesen

In addition, you can do something like this:


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

take a look how it works https://backendlessappcontent.com/7E25B48A-05FA-0B5D-FFAE-63CC0AC26C00/A09B7B01-A9D5-43E6-AF33-6A774E4BB455/files/ui-builder/containers/default/index.html?page=adaptive

Regards, Vlad

1 Like