Conditional css binding

Hi!

I would like to add dynamic conditional css:

Like if the state.data.image!=null then the box under it should be align center, but if state.data.image==null then it should align left. how can I achieve this?

Link: Builder.io: Drag and drop page builder and CMS

@radikris Great question, yes this is definitely possible. Select the item you want to style, and then in the data tab you would add an element binding to the style object for that element.

So in the example above, you would add a new binding for Get style.justifyContent and then in the from input you would put your logic:

Screen Shot 2022-02-28 at 9.35.56 AM

Try it out and let me know if that works!

yes, that was it, thanks, although I am sorry that this binding is not scoped to the specific device size. So if I want to center it only in mobile view it is not possible with this approach?

UPDATE found the answer, I can check it through state.deviceSize and use conditional css!