Follow us

Q & A From “Talk To The Team”

By Nick Halbakken on May 7, 2014 in Uncategorized
3

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.

General Questions:

How do I remove Adobe Edge Reflow CC on the Mac?

I’m finding it difficult to work on wide-screen websites where the width is greater than 1000 px – can you help?

The color won’t go away when I click the X to the right of the color palette – why not?

Is a subscription to Adobe Creative Cloud required in order to view what we create in Edge Reflow on a device in Edge Inspect?

 

Media Queries & Breakpoints:

Where can I change values for Media Queries (aka breakpoints), such as maximum or minimum size?

What does “maximum” mean for a breakpoint?

 

Layout & Design Surface

I’m having trouble getting started with responsive design in Edge Reflow.  Where should I start?

How can I copy and paste styling from one div to another?

When I slide the resolution bar and make it smaller, nothing changes. None of the elements resize or move.  What’s happening?

I know that I can design a form using form elements in Edge Reflow.  Can I also connect the form to a server?

It’s hard to place a div inside another div – can you help?

I’m not sure how to work with float left and right – can you help?

I have an image inside a div and I want to move the outer container div.  When I try, I’m only able to move the image.  Can you help?

I’m not able to manipulate css: background-image-position by visually dragging.  Could you please add this?

I imported a white image and its hard to find when the background is white too – can you help?

How do I keep a div fixed to the bottom of the screen?

Setting a height of 100% doesn’t work as I would expect – what’s going on?

How do I make a div absolute, if it has movable divs inside it?


 

Q: How do I remove Adobe Edge Reflow CC on the Mac?

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.

Q: I’m finding it difficult to work on wide-screen websites where the width is greater than 1000 px – can you help?

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.

Q: The color won’t go away when I click the X to the right of the color palette – why not?

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.

ColorPicker_2

 

Q: Is a subscription to Adobe Creative Cloud required in order to view what we create in Edge Reflow on a device in Edge Inspect?

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.

Q: Where can I change values for Media Queries (aka breakpoints), such as maximum or minimum size?

A: To edit Media Queries, click and hold on the + button in the upper right.

MediaQuery_6

Q:What does “maximum” mean for a breakpoint?

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.)

MediaQueriesOverview_7

MediaQueriesOverview_8

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.

Canvas_9

 

Q: I’m having trouble getting started with responsive design in Edge Reflow.  Where should I start?

A: A great place to start working with Reflow is through the Welcome Project (Help->Open Welcome Project) or viewing our video tutorials.

Q: How can I copy and paste styling from one div to another?

A: Edit->Copy Visual Styles (shift+command/control+c), and Edit->Paste Visual Styles (shift+command/control+v)

Q: When I slide the resolution bar and make it smaller, nothing changes. None of the elements resize or move.  What’s happening?

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.

PercentSize_1

Q: I know that I can design a form using form elements in Edge Reflow.  Can I also connect the form to a server?

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.

Q: It’s hard to place a div inside another div – can you help?

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.

Q: I’m not sure how to work with float left and right – can you help?

A: Using float can be confusing.  We’d recommend the tutorial on layout as a starting point.

Q: I have an image inside a div and I want to move the outer container div.  When I try, I’m only able to move the image.  Can you help?

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”:
Breadcrumbs_10

2) Click the icon at the left end of the DOM bar to open the Elements panel, and click on the “Box” element there:
ElementsPanel_11

Use the menu item Edit > Select > Select Parent:

SelectParent_12

Q: I’m not able to manipulate css: background-image-position by visually dragging.  Could you please add this?

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.

Q: I imported a white image and its hard to find when the background is white too – can you help?

A: If you temporarily add a background color to the main container, white images will be visible.

Q: How do I keep a div fixed to the bottom of the screen?

A: To get a div to stay fixed to the bottom, make the div “absolute” with bottom:0.

Absolute_3

Q: Setting a height of 100% doesn’t work as I would expect – what’s going on?

A: Reflow is built using HTML, CSS and JavaScript, just like the sites you are designing. For the canvas, we wanted to make it easy for people to draw below the fold. To do this, we used some CSS to make the height of the main container always a little taller than 100%.  This means that you can’t set the height of any box to 100% in the primary container.  To work around this, just draw a box with the height specified in pixels, and inside that box you can place another element with a height of 100%. When you prepare to move your site live, just remember to fix up your html and css a little around that box and everything should work out.

 

Q: How do I make a div absolute, if it has movable divs inside it?

A: In the layout tab, you should be able to mark a div as “absolute” even if its contents are relative or static.

Absolute_4

Thanks for your valuable feedback and questions. With your help, we’re making Reflow better. Keep it coming!

About the Author

Nick HalbakkenView all posts by Nick Halbakken >