Responsive layout overview

Using media rules to create responsive layouts
Responsive design uses a flexible layout that adapts to different viewport orientations or sizes, so that you don't have to create multiple layouts. Google Web Designer offers various tools for you to build a responsive design.

Responsive page dimensions

Responsive documents should have the page width and height set to 100% in order to fill all available space on the screen.

New files

In the new file dialogue, select the Responsive layout tick box when specifying dimensions. (This option isn't available for all file types.)

Existing documents

In the Responsive panel, select the Responsive layout tick box.

Percentage-based sizes and positions

Percent Authoring Overview

Beyond the page dimensions, you can also specify the size and position of elements using percentages instead of pixels. Percentages preserve an element's size and alignment relative to the parent container, even when the parent container changes.

When you're aligning elements, the fluid layout option for the alignment and distribution tools lets you easily set percentage-based positions.

Media rules to override CSS styles

Media rules let your document detect the viewport size and orientation, and apply different styles accordingly. For example, a phone might display content in a single column, while a tablet could show the same content in two columns. These style changes, called overrides, occur for specified sizes or size ranges.

You can switch between different sets of rules in the Responsive panel:

  • Default rules: Select Edit default rules when making changes to the default set of styles, or when making changes that apply to all viewport sizes (such as adding or deleting assets, components or events).
  • Media rules: Select a specific size or a size range to override the default styles for that viewport size.

When a media rule is selected, you can set styles that only apply for that size or size range. For example, you can adjust an element's position, size, source, visibility or animation.

Learn more about media rules and style overrides.

Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue