Responsive

Responsive means one web page adapts to the screen that shows it, so visitors on a phone, a tablet or a desktop monitor see the same content in an arrangement that fits. In Drupal the theme's CSS controls the layout, and core adds a viewport meta tag, the Breakpoint module and the Responsive Image module.

How responsive design works in Drupal 11

MDN describes responsive web design as an approach, not a separate technology. Its building blocks are fluid grids, images that never exceed their container and CSS media queries. The viewport meta tag is a fourth requirement that MDN treats separately.

Drupal covers the fourth requirement itself. In 11.2, BareHtmlPageRenderer::systemPageAttachments() attaches a viewport tag with width=device-width, initial-scale=1.0 to the page head. The theme covers the first three: it ships the CSS that rearranges columns and menus at different widths.

Core also lets a theme or module name its media queries. The Breakpoint module reads an EXTENSION_NAME.breakpoints.yml file, where each entry has a label, a mediaQuery, a weight and a list of multipliers. The core theme Olivero declares eight breakpoints, from min-width: 500px to min-width: 1440px.

The Responsive Image module uses those breakpoints to choose image files. It depends on Breakpoint and Image, and its help text says a style defines the options a browser has when it selects an image file. The browser gets either a picture element or an img with srcset and sizes, per the Drupal User Guide.

Example

To serve a hero image at the right size, enable Responsive Image, then go to Configuration › Media › Responsive image styles and choose Add responsive image style. Enter a label, a fallback image style and a breakpoint group. For plain viewport sizing the help text suggests a single breakpoint with an empty media query. If you choose the sizes option, a hero that always fills the screen can use 100vw in the Sizes field.

Then open Structure › Content types, choose your type, go to Manage display and switch the image field's format to Responsive image. Pick the new style there.

Common mistakes

• Removing the viewport tag. A hook_page_attachments_alter() implementation can strip the default mobile tags; a core test module does exactly that. Do it on a live site and a phone renders the page at a virtual width, so your narrow-screen rules never fire.
• Locking zoom with user-scalable=no. MDN warns that this harms people with low vision and cites the WCAG requirement of at least 2x scaling.
• A wrong sizes value. The value tells the browser how much of the viewport the image fills, and the browser picks a file from it. A value that does not match the real layout leads to the wrong file.

For marketing and content teams

Responsive behavior comes from the theme and from how content is built, so test published pages on a real phone and a tablet, not only in a narrowed desktop window. Ask your developer which breakpoints the theme declares, and review each page at those widths. Upload images wide enough for the largest slot they will fill, and let the image styles produce the smaller versions.

With DXPR

DXPR Theme is built on Bootstrap 5, and its product page describes Bootstrap's responsive grid as the structure that keeps pages consistent as the screen changes. The same page tells you to check your own content on desktop, tablet and mobile.

Sources

• MDN: Responsive web design
• MDN: The viewport meta tag
• Drupal User Guide: Concept: Responsive Image Styles
• BareHtmlPageRenderer::systemPageAttachments, Drupal 11.2.0 source
• BreakpointManager, Drupal 11.2.0 source
• Olivero breakpoints file, Drupal 11.2.0 source
• Responsive Image module help text, Drupal 11.2.0 source