My text is overlapping objects below when I switch to tablet/mobile breakpoints
This may occur when elements are placed directly on the grid or the container layout is 1×1.
In the top menu, click the Desktop breakpoint.
- If the overlapping objects are in a container, go to the Design panel, then under Custom Layout, select “Additional rows” from the drop-down, and place each object in a row.
- If the items are directly on the grid, add a container with rows, then drag the objects to it as described above.
- Alternatively, you can align objects in a vertical Flexbox.
I can’t drag to resize my 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 a grid 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 row expanded and is very large on the mobile layout
Flex transforms grid columns to rows on mobile. If the minimum height of an element (for example, a container) is larger than the minimum height of the grid in the main breakpoint, the row may not display correctly in the mobile layout.
The grid is resized based on its content. So that means that most commonly there is an image or container that is set in px.
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.