AMP

Layout & media queries

AMP supports both media queries & element queries, plus comes with a powerful, built-in way to control the layout of individual elements. The layout attribute makes working with and creating fully responsive design much easier than if you'd use CSS alone.

Responsive images, made easy

Create responsive images by specifying the width and height, setting layout to responsive, and indicating with srcset which image asset to use based on varying screen sizes:

<amp-img
    src="/img/narrow.jpg"
    srcset="/img/wide.jpg 640w,
           /img/narrow.jpg 320w"
    width="1698"
    height="2911"
    layout="responsive"
    alt="...">
</amp-img>

This amp-img element automatically fits the width of its container element, and its height is automatically set to the aspect ratio determined by the given width and height. Try it out by resizing this browser window:

TIP – See our side-by-side live demos of amp-img: Live Demos on AMP By Example.

The layout attribute

The layout attribute gives you easy, per-element control over how your element should render on screen. Many of these things are possible with pure CSS – but they're much harder, and require a myriad of hacks. Use the layout attribute instead.

Supported values for the layout attribute

The following values can be used in the layout attribute:

Layout type Width/
height required
Behavior
nodisplay No Element not displayed. This layout can be applied to every AMP element. The component takes up zero space on the screen as if its display style was none. It’s assumed that the element can display itself on user action, for example, amp-lightbox.
fixed Yes Element has a fixed width and height with no responsiveness supported. The only exceptions are amp-pixel and amp-audio elements.
responsive Yes Element sized to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes. This layout works very well for most of AMP elements, including amp-img, amp-video. Available space depends on the parent element and can also be customized using max-width CSS.

Note: Elements with "layout=responsive" have no intrinsic size. The size of the element is determined from its container element. To ensure your AMP element displays, you must specify a width and height for the containing element. Do not specify "display:table" on the containing element as this overrides the display of the AMP element, rendering the AMP element invisible.

fixed-height Height only Element takes the space available to it but keeps the height unchanged. This layout works well for elements such as amp-carousel that involves content positioned horizontally. The width attribute must not be present or must be equal to auto.
fill No Element takes the space available to it, both width and height. In other words, the layout of a fill element matches its parent. For an element to fill its parent container, ensure the parent container specifies `position:relative` or `position:absolute`.
container No Element lets its children define its size, much like a normal HTML div. The component is assumed to not have specific layout itself but only act as a container. Its children are rendered immediately.
flex-item No Element and other elements in its parent take the parent container's remaining space when the parent is a flexible container (i.e., display:flex). The element size is determined by the parent element and the number of other elements inside the parent according to the display:flex CSS layout.
intrinsic Yes The element takes the space available to it and resizes its height automatically to the aspect ratio given by the width and height attributes until it reaches the element's natural size or reaches a CSS constraint (e.g., max-width). The width and height attributes must be present. This layout works very well for most AMP elements, including amp-img, amp-carousel, etc. The available space depends on the parent element and can also be customized using max-width CSS. This layout differs from responsive by having an intrinsic height and width. This is most apparent inside a floated element where a responsive layout will render 0x0 and an intrinsic layout will inflate to the smaller of its natural size or any CSS constraint.

TIP – Visit the Demonstrating AMP layouts page to see how the various layouts respond to screen resizing.

What if width and height are undefined?

In a few cases if width or height are not specified, the AMP runtime can default these values as the following:

  • amp-pixel: Both width and height are defaulted to 0.
  • amp-audio: The default width and height are inferred from browser.

What if the layout attribute isn’t specified?

If the layout attribute isn't specified, AMP tries to infer or guess the appropriate value:

Rule Inferred layout
height is present and width is absent or equals to auto fixed-height
width or height attributes are present along with the sizes attribute responsive
Both width and height attributes are present fixed
width and height are not present container

Using media queries

CSS media queries

Use @media to control how the page layout looks and behaves, as you would do on any other website. When the browser window changes size or orientation, the media queries are re-evaluated and elements are hidden and shown based on the new results.

READ ON – Learn more about controlling layout by applying media queries in Use CSS media queries for responsiveness.

Element media queries

One extra feature for responsive design available in AMP is the media attribute. This attribute can be used on every AMP element; it works similar to media queries in your global stylesheet, but only impacts the specific element on a single page.

For example, here we have 2 images with mutually exclusive media queries.

<amp-img
    media="(min-width: 650px)"
    src="wide.jpg"
    width="527"
    height="355"
    layout="responsive"
    alt="...">
</amp-img>

Depending on the screen width, one or the other will be fetched and rendered.

<amp-img
    media="(max-width: 649px)"
    src="narrow.jpg"
    width="466"
    height="193"
    layout="responsive"
    alt="...">
</amp-img>