Flex: Troubleshooting (Flex v2.0)
Troubleshooting FAQ’s
My elements are overlapping other objects:
This may occur when elements are placed directly on the advanced grid without an alignment set and if the advanced grid is not tall enough.
- Select the overlapping element and from within the design panel select an alignment option. Usually selecting a bottom alignment will be the best solution to this issue.
- Next select the advanced grid that holds the element, and increase the height of the grid within the design.
I can’t drag to resize my advanced grid on the mobile layout
Grid height is set as a minimum value, which means it won’t get smaller than what you set. For example, if an advanced grid's minimum height is set to 400px minimum height with a container set to 1200 px minimum height, the grid can’t be less than 1200px.
To resize the content:
Design panel > Size > reconfigure the minimum height.
Alternatively, you may resize the content inline and then resize the grid inline or using the Design panel.
My advanced grid expanded and is very large on the mobile layout
Advanced grid's on mobile breakpoints will automatically inherit the height and width of the desktop layout. If your content if very large on the mobile layout, you may need to simply resize the advanced grid specifically on the mobile layout to reduce its height.
To resize the content:
Main breakpoint > Design panel > Size > reconfigure the minimum height.
Alternatively, you may resize the content inline and then resize the grid inline or use the Design panel.
My design looks unorganized when I switch breakpoints
The following may explain why your design looks messy or unorganized when you switch breakpoints:
- Grid Objects are not snapped to grid lines. This happens more commonly when the cells are small.
- Grid objects are not aligned.
- The pin is in its default state. Each time you add a new object, by default the object is pinned to the top left. Pinning is changed when you align it. For example, “align bottom” will pin to bottom.
To snap objects to grid lines:
Drag an object and use the pink snap lines in order to place objects on the grid.
Alternatively, use the alignment controllers from the Design panel.
To manually pin, begin by selecting an object, then:
Design panel > scroll to Position > Next to Pin, click the arrow corresponding to where you want to pin the object.
I can’t change the font size on the tablet layout:
Desktop and tablet share the same font size. We suggest that you select a font size that fits both desktop and tablet layouts.
I try to rearrange elements on mobile specifically but it affects all the breakpoints
When you change the structure, it affects all breakpoints. Take this scenario for example: On the main breakpoint, there are 2 adjacent containers spanning the entire grid but you want those elements to be stacked vertically on mobile. When you try to change the location of the containers, they are nested instead of stacked. By nesting the elements on mobile, you will nest the elements on all breakpoints. There is no space for the elements to be stacked vertically so they are nested instead.
To correct this, change the minimum height on the space you are working on.
Select the Grid, then in the Design panel under Size, increase the Min Height. This gives you more space to move elements around. After you rearrange the elements, you may resize it to the desired height.