Q & A From “Talk To The Team”
Some of you know that we have a “Talk to the Team” button in Edge Reflow:
We read everything you send to us! We noticed some similar questions coming up frequently, so here are some responses to those. If you have questions/feedback please use the Talk To The Team button or submit them to our forums.
Media Queries & Breakpoints:
Layout & Design Surface
A: To uninstall Adobe Edge Reflow CC, find it in your Applications folder and simply drag it to your Trash. In addition, if you have Photoshop CC installed, you will also want to delete the Reflow Photoshop Plugin. To do this, find the reflow.generate folder at: /Applications/Adobe/Adobe Photoshop CC/Plug-ins/Generator/reflow.generate and drag that to the trash.
A: If you’re trying to design for a screen larger than the screen you’re working on, yes, this can be a bit tricky. You can use the Zoom functionality (Zoom In and Zoom Out in the View menu, or the Canvas Zoom Level control in the lower right corner of Reflow) to allow you to see more than would normally fit on your screen. You can scroll both horizontally and vertically when you’re zoomed in, and you can also scroll if there’s an element on the canvas that’s outside of the area you can see, but you can’t pan around an empty canvas.
A: This is probably because the color was set in a different region. Regions work a little like layers, where they stack on top of each other. The “x” button only removes the color from the current region. So, if you define a color in the default region and then go to another region, the “x” button removes the color from the second region. If a region above the current region has a color defined, then that color will keep coming through. There are two options to resolve this. The first is to go to the region that has that color is defined and click the “x” there. The other is to open the color picker and type “transparent” to make the color in the current region transparent and still have a color set in the other regions.
A: You must have a Creative Cloud account login and password when using Edge Inspect, however, you can sign up for a free account. This free account will allow you to use Edge Inspect with Reflow with one connected device. You must be a paid Creative Cloud subscriber to use unlimited connected devices with Edge Inspect.
A: To edit Media Queries, click and hold on the + button in the upper right.
A: In Reflow, you can specify media query breakpoints using either all maximum width values, or all minimum width values; the default is maximum. (You can change the orientation by clicking and holding the “+” icon at the right end of the Ruler.)
A “maximum” breakpoint at 600px, as we show here, means that the styles specified in this media query will apply for any screen width up to 600px. There is no limit to how large this number can be, although setting a value larger than a typical “desktop” screen size is probably not useful. (You only need a non-default breakpoint in this case if you want different styling above and below that width.)
In Reflow’s ruler, you can add a breakpoint where you want your design to change, and click in different media query regions in the ruler or drag the canvas resize handle (on the right edge of the Reflow canvas) to see how your design will look on different screen sizes.
A: A great place to start working with Reflow is through the Welcome Project (Help->Open Welcome Project) or viewing our video tutorials.
A: Edit->Copy Visual Styles (shift+command/control+c), and Edit->Paste Visual Styles (shift+command/control+v)
A: The most likely cause of this is element(s) use percentage values rather than fixed values. By default, Reflow sets horizontal values in percent (%), like size and margin-left. You can change this to fixed values like px or em using the menu shown below, but then the element won’t resize as the size of its parent changes. To find an element that is using fixed values rather than %, it’s also important to check not just the element you want to change sizes, but also check that any of its parent boxes are also setting their widths in %. Most elements’ widths are based off the size of their parent, not the size of the screen, so if you set your grid container to be exactly 1190 px, then nothing would change.
A: Reflow is intended to be used for expressing designs, rather than creating production code. Reflow can be used to design a form, but not to create the logic to handle form submissions.
A: You can either draw a new div (box) inside an existing div, or you can drag an existing div inside another one. Sounds like we could make this more discoverable! Let us know in the comments if there is a specific case where this is hard to do.
A: Using float can be confusing. We’d recommend the tutorial on layout as a starting point.
A: It sounds like you’re having difficulty selecting the parent div rather than the (child) image. There are a few ways to select the parent here if you first select the image.
1) Using the DOM bar at the bottom of Reflow, just click on the “Box” element you see to the left of “Image”:
2) Click the icon at the left end of the DOM bar to open the Elements panel, and click on the “Box” element there:
Use the menu item Edit > Select > Select Parent:
A: You can type the values into the background image pane, but you can’t grab the background image to change the position. We added a story to our backlog to add a content grabber similar to InDesign that will allow you to visually change the background position.
A: If you temporarily add a background color to the main container, white images will be visible.
A: To get a div to stay fixed to the bottom, make the div “absolute” with bottom:0.
A: In the layout tab, you should be able to mark a div as “absolute” even if its contents are relative or static.
Thanks for your valuable feedback and questions. With your help, we’re making Reflow better. Keep it coming!