I have an interaction on all screen sizes above mobile screen size which involves a couple of elements being hidden (display setting none) but when i choose on mobile screen size for the interaction not to happen and i put the elements to flex display for some reason, it must be a massive bug, kinda of a reason, on preview and when i publish the elements arent there??? if anyone can help that would be amazing
Yes, this problem was discussed numerous times on forums. It is about the initial state of the interaction that is always happening even if you disable the interaction itself. Your initial state moves your object out of the view or makes it invisible with opacity: 0 and this is being carried over to every breakpoint. Therefore if you disable the interaction the initial state will still move your object out of the screen or make it invisible. And since no revealing einteraction happens you end up with missing element.
The solution is to not use initial state but style the element in a way that will work like it’s initial state. For example move this element to the side and make it invisible with your style panel not interactions. Then just make it visible on a breakpoint where this is necessary.
I just tested a slightly longer workaround as I don’t like to mix style setting with interaction if I can help it.
For your we are box elements, you can duplicate them and name them we are box mobile
Give your we are box elements on mobile a setting of display: none
Give your new we are box mobile elements a setting of display: flex on mobile and display: none for all other breakpoints.
Both ways will work in this case, @dram’s is easier. Just note that if you add transform settings in the style panel as initial state and then mix with an interaction, you’ll likely have issues. (which you’re not here).
As a matter of fact I’ve used both approaches on my own site. I usually consider transforms in styles as part of a certain interaction and yet to run into any kind of issues (which I used to have with transforms put into place but not as part of ix flow - I am now smarter than that, and use nested divs to target the same object with transforms).
The problem with two sets of elements is… well… having two sets of elements which is a pain to update when necessary.
In this case most definitely yours is the better solution Good point about the maintenance, I’m not the tidiest of designers by a long shot!
( @Hobbitrock83, just take a look at Alex’s website to understand that he knows a few things about interactions! )
I think the trouble I see a few users run into is creating the initial state with styles, and an initial state in interactions. The browser is fighting with which one to believe. When somethings not happening with an interaction like it should, it’s the style panel I go to first to debug.
That is a good solution suggested above.
which is a pain to update when necessary.
Good point about the maintenance, I’m not the tidiest of designers by a long shot! 
)