Codeless Desktop Tablet Mobile adjusting for each with UI Builder

UI Builder
1

Hi,

Centering Content in UI Builder - YouTube I was under the impression that Desktop, tablet and phone layouts could be changed and would be independent of each other as in 3:50 seconds. Whenever I change the layout in mobile it changes the layout in desktop and Tablet which messes the designs up.
Example: 04.04.2021-11.33.01 - Can I get clarification. Thanks

I found Device responsive pages in UI builder - #2 by vladimir-upirov
This explains to add class but if I add class lets say ‘hide-Logo’ on mobile how do i enter it. Or, the reverse to show? How do I do that. Is this the way to go?

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

2

Hello @Mark_Wilkinson

Switching between Desktop/Table/Mobile just changes the app screen size and this is doesn’t affect rendering elements. Except, while you use/configure width size for Container’s Cells it remembers value for currently selected device size.

This explains to add class but if I add class lets say ‘hide-Logo’ on mobile how do i enter it.

can you see the logo on other devices (Desktop/Table)?

Or, the reverse to show?

I’m not sure I get the question, could you please add a little bit more information

Regards, Vlad

3

Hi Vlad,

Codeless - switching between Desktop/Table/Mobile and change elements does not change for the specific page. It is only a visual. Ideally, changing elements should change as default for that size.

For codeless its important that this can be done within each of the pages ie. mobile, tablet and desktop
https://www.screencast.com/t/jD3c3SHMB3

Thanks