Support Topics Documentation Slack YouTube Blog

Device responsive pages in UI builder

UI Builder
#1

Hi there

How do you return the users device type (mobile / desktop / tablet) to UI builder logic?

I’m looking to toggle visibility of page components depending on device type and can’t see how to do this obviously. Am I missing something really obvious…?

Thanks!

Andrew

#2

Hello @Andrew_Lawrence

I would recommend you to App Extensions (Styles) instead of logic

UI Builder - Backendless 2021-02-20 19-54-28
UI Builder - Backendless 2021-02-20 19-54-282774×1010 236 KB


@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;
  }
}

and then, use the classes for whatever blocks you need

UI Builder - Backendless 2021-02-20 19-55-06
UI Builder - Backendless 2021-02-20 19-55-062768×1028 199 KB

here is my app, you play with different screen sizes
https://backendlessappcontent.com/7E25B48A-05FA-0B5D-FFAE-63CC0AC26C00/E9920D04-8F81-D6EC-FFBB-4D4D78486100/files/ui-builder/containers/default/index.html?page=adaptive

Regards, Vlad

#3

Hi Vlad
Thanks for this - I was thinking that might also be a way to go.
Will give it a try…
Andrew