How to create full width content

How to create full width content with Maker

With Maker you have the flexibility of creating both fixed width and full width content. When it comes to designing full width content, there are a few important questions that need to be addressed. This is because by default, ALL content in Maker is fully responsive and will scale up or down automatically depending on the breakpoints.

• Do you want all content to scale including elements and fonts?

• Do you want only the elements to scale and not the fonts?

The answer to the above questions will determine how you will design your content in Maker and use both the contextual panel and style settings to achieve the desired results.

All Content Will Scale

With the grid selected, go to the grid menu on the contextual panel on the right. To turn ON simply toggle the "Full Width" button to the right. This is automatically make the content full width.

Only Elements Scale and not Fonts

If you do not want your fonts to scale, we recommend adding the element as a grid background, On the grid contextual panel, select background and use the dropdown menu to choose either color, image or video. You DO NOT need to turn on full width as an option when adding elements as grid backgrounds as they will automatically be scaled full width.

When you add an element as a grid background, it scales height of the element (image or video) and crops the element as needed on a particular breakpoint . If you wish to control the exact height of the element, not scale the fonts and still have a full width grid, there are a few steps involved:

• Click on the cog wheel seen at the top right corner and go to Edit Style Settings. Click on Miscellaneous then toggle to OFF the Fluid Font Size. As a reminder, the fluid font size is ON by default to help you when it comes to a responsive text size for each breakpoint.

• Next, turn on full width on the grid menu

• Lastly, under the grid menu, click on the dropdown "scale width" instead of scale everything. With scale width selected, you sent the exact height of the content and the width will scale automatically.

Note: When selecting scale width, you will need manually set the same setting for all grids of the story. In order for the editor to perform as expected, only one option of the two option- sale everything or scale width, can be selected per story.