Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Responsive Breakpoints
Macaw starts the design at a screen size of 1200 pixels. This is referred to as a breakpoint. In responsive design, when resizing the browser window, your design can “break” at certain sizes. To fix the design content that breaks, you can add a breakpoint at that screen size and make the change. Technically, a breakpoint is a CSS Media Query, but we don’t need to go there now.
Because Macaw currently cannot be used to design mobile-first (starting with the smart phone design), you will design for a desktop screen first, and then make changes to the smaller screen sizes later.
Before we add some design content, you can set some generic breakpoints that most of us use as a starting point (phone, tablet, and desktop).
In the Inspector panel on the right (click the word Inspector), you will see the Breakpoints at the top. To add a new breakpoint, click the + to the right of the Default (1200 PX) breakpoint. In the Add Breakpoint dialog box, change the value to 768 and click ADD to add a breakpoint at 768 pixels (tablet size), as shown in Figure 3.
)
Figure 3 Set a breakpoint in Macaw
You can also add a breakpoint for mobile at 480, or whatever fits your design. To go between breakpoints, you can click to the right or left of the name of the breakpoint in the Inspector panel. Double-clicking the pixel value of a breakpoint allows you to edit it.
You will also see little arrows on the ruler now that indicate where the breakpoints are (see Figure 4). If you click the ruler to the left of the little breakpoint arrows, the page area will change to fit that size.
)
Figure 4 Navigate breakpoints
Now that some breakpoints are set (you most likely will need to revisit them as you design), you can get to designing. Make sure that the largest breakpoint is selected (1200 PX by default) using one of the previously mentioned methods. Macaw won’t let you add content to the smaller breakpoints because you can’t currently use a mobile-first design approach. The DOM (Document Object Model) is locked, and most of the tools on the left side of the workspace are grayed out.