Designing for mobile and tablet

Makeswift allows you to optimize your page designs for different screen sizes. You can switch device modes at the top center of the page builder toolbar to see what your page will look like at the standard screen size for that device.

By default, styles from desktop mode cascade to tablet, and tablet to mobile. Once a style has been altered 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 altering content, 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.

https://downloads.intercomcdn.com/i/o/246022496/4b4c4f68d08c9801577c57e7/Break.gif

A horizontal dashed line will now be 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.

https://downloads.intercomcdn.com/i/o/246022566/d4fece61411108da358b55af/Join.gif

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.