In the past week, someone asked on our user forums how to send an object to the front or back in Reflow. In Reflow, as elements are placed on the canvas, their default position value is “static”. When items are position: static, they do not support the z-index property which determines stack order.
To change the stack order of elements in your Reflow design, you must first change the position property from static to “absolute”, “relative” or “fixed”. You can do this in the Layout -> Advanced pane.
Once your element is fixed, absolute or relatively positioned, you will see options in this pane for z-index.
Click on the first button to push an element back in the stack order. Or, click the second button to send the object back in the stack order.
While working on a responsive design in Reflow. You may find yourself styling an element while you are in one of your breakpoints. For example, you may have added a background color and image to a box while in your 350px breakpoint like this:
However, you actually want all of these styles on the default breakpoint. To push these styles to the default breakpoint, hover over the right edge of each style. You should see a button show up looking like this: . Pushing this button next to a style will push that region specific style to all breakpoints.
Because CSS Filters and CSS Regions are not yet supported in all the browsers, Edge Reflow doesn’t have support for them turned on, by default. To use CSS Filters or CSS Regions in the tool, you need to go to the menu item: View -> Shiny Web Features. You will get the following dialog describing these features.
Turn these features on.
Now, you will be able to use CSS filters at the bottom of your Styling tab for any element on your canvas.
Or, you will be able to use CSS Regions which I have a tutorial for in an earlier blog post.
Some things are not obvious in Edge Reflow. I’ve always found that modifying breakpoints that you have created is one of those things. By default, Reflow using max media queries. If you want to change your project to use min media queries, do the following:
1. At the very top right of the application long press on the down arrow (to the right of the plus symbol).
This will bring up the orientation dialog.
Here, you can change your project to use min media queries, update breakpoint labels or change the value of each breakpoint.
Simple… but, honestly, hard to find.