Responsive design

​

Designing for mobile and tablet

In Makeswift, styles always cascade from larger devices to smaller ones. Once a style has been overridden on a smaller device, that specific style will no longer be affected by changes from a larger device. All element and text styles can be set per device. Things such as text content, images, sorting elements, or changing links are not responsive.

Select an element and switch to a smaller device. If a style is being inherited from a larger device, the label for it’s panel will be gray.

Making an edit to the style on a smaller device will change the label color to blue. Clicking the blue label will open an option to revert changes back to the larger device.

​

Setting responsive breakpoints

Select a box containing multiple elements in a single row. Vertical dashed lines appear in between each element. Click anywhere on a vertical dashed line to split the row.

A horizontal dashed line will now be displayed between the two rows. Clicking the horizontal line will join the adjacent rows back into a single row. Different breakpoints can be set on different device modes.