Watch the video to follow the steps outlined below about building a responsive design in Maker.
Maker's responsive drag-and-drop publishing makes it easy to ensure your pages are fully responsive.
Pro Tip: Before creating a new page with Maker, get to know your target market. For example, if your audience traffic is primarily mobile, approach your design from a mobile-first perspective. If your audience is heavily tablet, think about your tablet design first, etc.
Photoshop Note: If you're using Photoshop to create your design, visit these pages first. You'll need to review our PSD file prep for Maker as well as the PSD specific breakpoint logic.
By default, every new story that you create with Maker will have three default breakpoints:
The editor will automatically open on the Desktop breakpoint. Whatever content you create on Desktop will inform the content on the Tablet & Phone breakpoints. To customize Tablet & Phone layouts, simply select the breakpoints from the dropdown menu.
Note: Edits made to Tablet & Phone breakpoints will never affect Desktop. This applies to grid layouts and element formatting only. When you add or delete content, the changes are applied story-wide.
When a story is first created, the inheritance follows typical top-down logic.
For example, content added to Desktop will affect the smaller breakpoints of Tablet and Mobile.
↓
Tablet
↓
Mobile
If you go to Tablet to make changes, Mobile will be affected, but not Desktop.
Tablet
↓
Mobile
And if you make changes to Mobile, no other breakpoint should be affected.
Once you make edits to a certain breakpoint, that breakpoint becomes it's own island, which means any edits to the parent or larger breakpoint above will no longer affect it.
For example, if you take an autogrid that's 2x2 on Desktop, and convert it to 1x1 on Tablet, but then go back to Desktop to change it to 4x4, Tablet will not be affected by the recent round of changes:
You'll notice that besides the Tablet & Mobile breakpoints are dropdown icons. Click on these to expand the breakpoint families:
When you click on a breakpoint group, you'll be immediately directed to the parent of that group, which is the smallest range in that breakpoint.
Changes made to the parent groups (320px - 374px and 480px - 767px) will affect the larger breakpoints within that group.
Creating content for a unique-sized container? Create a custom breakpoint by clicking on the device icon, then + Add breakpoint.
Give the breakpoint an exact pixel size:
Maker will do the math and figure out where the custom breakpoint fits in the groups. Once created, you can edit and access the custom breakpoint as normal.