Fixing responsive layouts
11th of August, 2015As of version 7.1, Freeway no longer allows items to be narrower than their content. The reasons for this are twofold – it's easier to work with items when you can see them (overflowed items would become invisible in 7.0.4 or lower) and it prevents layouts from unexpectedly blowing up.
One drawback is that some layouts that appeared to be working in 7.0.4 can now look broken in 7.1 or above. If your pages now have a red bar on the right side when switching to smaller breakpoints, upgrade to the latest version of Freeway (7.1.1 at the time of writing) and try the following steps:
- Start in the Default breakpoint of the first master page
- Switch to "Page" view in the Site panel by clicking the word Site at the top of the Site panel
- Switch to widest breakpoint
- If the page shows a red bar on the right side, press Control-Command-= to shrink its width (this often fixes the problem)
- If the page still shows a red bar, look for items that have a red cross in the Site panel. Start with the innermost items (most heavily indented items) and see if they have a problem, such as a fixed width or margin; also check to see if their parent has any padding that might be causing the problem. At smaller breakpoints the problem could also be caused by text that's too large for its container. If this is the cause, select the text and use the Styles Inspector to open the style (the Edit Styles dialog will open on the right page for editing the style at the current breakpoint). Set the font size to something smaller and Ok the dialog
- Repeat the last step for any item that displays a red X and hit Control-Command-= again when you're done
- Control-Command-] to cycle to the next page and repeat the above steps
- Go back to the first master page and repeat the above for all subsequent breakpoints
If you're still having any issues, please send your file into our Support Team who will be happy to take a look at it for you.