It’s taken me a couple of tries but I finally understand what’s been confusing me about the UI/UX in Pinegrow regarding the Responsive controls in the Inspector palettes.
I’m going to reference the Pine Trees Responsive Lesson here so everyone can see what I mean.
At 02:01 When talking about the spacing controls, you will clearly see that XS is highlighted in Green as this is the ‘breakpoint’ that the Spacing Controls is currently affecting. And the adjustments made affect the XS and up (Bootstrap 5) layouts.
However, in order to stop that from happening in MD and up, at 02:37, when the instructor is selecting MD and up to make changes, the XS is still remaining green.
This is a break in the UI/UX mental modal, because here it is implying that the GREEN is what you’re affecting - but you’re not - you’re only affecting the MD (and up).
The XS HAS breakpoint specific settings in this control, but the fact that when you select MD the XS still remains green is a problem.
Suggestion: When you select a breakpoint that breakpoint and up should be coloured in (let’s say) GREEN to show that’s what you’re affecting. However, any other breakpoints that you’re NOT affecting with these changes should NOT be GREEN but instead be another colour, that shows that they DO have breakpoint specific changes, but that what you have currently select is NOT affecting them.
Having both show green when you make a change is confusing.
This confusion is not just limited to the Spacing Controls, but throughout all the elements that have responsive breakpoint specific controls.
Please reconsider this current implementation and make it more clear which one you’re editing and which ones currently ‘have’ edits but that you’re not currently changing.
Thanks.
