Responsive layout overview - Google Web Designer Help (original) (raw)
Responsive design uses a flexible layout that adapts to different viewport orientations or sizes, so you don't have to create multiple layouts. Google Web Designer offers various tools for you to build a responsive design.
At minimum, your document should have responsive page dimensions. You can also create a fluid layout by defining object sizes and positions with percentages. To customize each element for different viewport sizes or size ranges, use media rules.
Image ads can't be responsive, but they can use the responsive workflow in a multi-size layout to export different sizes from a single document.
Responsive page dimensions
Make the overall document responsive
Responsive documents should have the page width and height set to 100% in order to fill all available space on the screen.
- Existing documents: In the Responsive panel, select the Responsive layout checkbox.
- New files: In the new file dialog, select the Responsive layout checkbox when specifying dimensions. (This option isn't available for all file types.)
To make the content on the page responsive, you can use fluid layout and media rules.
Fluid layout
Percentage-based sizes and positions
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.
Override attributes and CSS styles for different orientations and sizes
Media rules let your document detect the viewport size and orientation, and apply different styles and attributes accordingly. For example, a phone might display content in a single column, while a tablet could show the same content in two columns. These 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 base document 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 and attributes for that viewport size.
When a media rule is selected, you can set styles and attributes that only apply for that size or size range. For example, you can adjust an element's position, size, source, visibility, or animation. Google Web Designer also lets you override text content, text fitting settings, and component properties.
Learn more about media rules and overrides.
Was this helpful?
How can we improve it?