Responsive layout overview
Create a responsive document
When you first create a new file, you may have the option to select the Responsive layout tick box when selecting dimensions. This option sets the page's width and height to 100%, filling the available space on the screen. You can also select the Match viewport tick box for an existing document, which has the same effect.
To make the elements in your document responsive, you can use fluid layout (percentage-based positions) and add breakpoints.
Web developers use media queries to change a web page's layout and styling as the page expands horizontally. On a phone, for example, users might see content shown in a single column, while a wider view on a tablet might show the same content in two columns. These layout changes happen at breakpoints – viewport widths where the styling rules change.
Google Web Designer lets you place breakpoints for both horizontal and vertical viewport changes, so that a single ad can be styled for different sizes and orientation. You can also create distinct portrait and landscape versions with a separate set of breakpoints for each orientation.
Horizontal and vertical breakpoints together make a grid
When you create both horizontal and vertical breakpoints, you're defining multiple rectangular areas, each with a different set of styles. For example, if you use one vertical and one horizontal breakpoint, you’ll be creating four styles, one for each unique set of media rules.
Web Designer helps you keep track of the different horizontal and vertical ranges in your ad by showing each range as a different coloured bar above the rulers. Each rectangle where different ranges intersect is represented by its own style.
Responsive layouts change styles only, not content
Media queries let you change styles, but don’t give you a way to add or remove content. For example, you might have an image that you'd like to use when an ad is small, but you’d prefer to use a different, larger image for ads above a certain size. Or perhaps you'd like to add more images to a larger ad. Media queries don’t let you add assets like these when your ad passes a breakpoint.
You can work around this limitation by hiding assets until you want them to appear. For example, you can add images that you plan to use only in the larger versions of your ad, style them as
visibility:hidden in CSS, then change the style to
visibility:visible only in the larger versions of your ad.
Fluid layout in responsive ads
Another element of responsive design is fluid layout. If you enable Fluid layout in the Selection toolbar before using any of the alignment tools, you can use percentage-based alignment that will keep the elements relatively aligned with each other and with the enclosing container as the container changes size. You can also use a mix of percentage-based and pixel-based element sizes.