Changing visibility based on device width. Like Media Queries in CSS

[Breldan_Muthaka]

I have designed a header as follows,
However, I want to hide some of the containers based on the viewport width for responsiveness.

This is the current codeless logic that I’ve added. However, I think it’s not the right approach. I think the get component width works to get the width added into the editor for that element. Is there a logic block that can tell the size of the viewport?

[vladimir-upirov]

Hello @Breldan_Muthaka

According to our support policy private topic is available only for customers of Pro/Manage installations, so I’m going to make the topic public

[vladimir-upirov]

The logic is running only when changing the parent data model (AppData/PageData/SomeDataContainerData), in your case you need to use App Extensions, take a look at this topic

Device responsive pages in UI builder

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

Regards, Vlad

[Breldan_Muthaka]

Excellent! Thank you