Responsive layout overview

Using media queries to create ads with responsive layouts
This feature is unavailable for AMPHTML ads.

Responsive design uses flexible – rather than fixed – layouts. For ads, this means creating a single ad that can restyle its elements as the orientation or size changes, rather than creating multiple similar ads. Keeping with standard responsive design principles, Google Web Designer uses CSS3 media queries to let you to apply different styling rules for different-sized ads.

Breakpoints

Web developers use media queries to change a webpage'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 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 colored 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.

Was this article helpful?
How can we improve it?