What Does Responsive Mean for a Website?

A responsive website adapts its layout, images, and interactive elements to the size of the screen it is viewed on, so the same HTML can serve a phone, a tablet, and a desktop without a separate mobile site. You need responsive behavior whenever visitors may arrive from different devices and you want readable text, usable navigation, and no horizontal scrolling. The core tools are fluid grids, flexible images, and media queries; the practical test is resizing the viewport in a browser's developer tools and checking the result on a real phone.

The three techniques that make a layout responsive

Fluid grids

Instead of fixed pixel widths, containers and columns use relative units such as percentages, fr units in CSS Grid, or rem/em for spacing. A column set to width: 50% stays half the viewport as the viewport changes, while width: 600px does not.

Flexible images

Images should never be wider than their container. The common baseline is:

img {
  max-width: 100%;
  height: auto;
}

This lets an image shrink on a narrow screen while preserving its aspect ratio. For performance, srcset and sizes let the browser pick a smaller file for small screens rather than downloading a desktop-sized image and scaling it down.

Media queries

Media queries apply CSS only when conditions are met, most often viewport width:

/* Base styles: single column, mobile-first */
.card { padding: 1rem; }

@media (min-width: 768px) {
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

A mobile-first approach writes the simple layout first and adds complexity at larger widths, which usually produces less conflicting CSS than starting from the desktop layout and overriding it downward.

How to test whether a site is actually responsive

Resize the browser window slowly from wide to narrow. Watch for horizontal scrollbars, text that becomes unreadably small, and elements that overlap.
Open developer tools (F12 or right-click → Inspect) and toggle the device toolbar. Step through common widths such as 320, 375, 768, 1024, and 1440 pixels.
Check for overflow by looking for a horizontal scrollbar or by running document.documentElement.scrollWidth > window.innerWidth in the console. A true result means something is wider than the viewport.
Test on a real device, not only the emulator. Touch target size, font rendering, and actual network speed differ from a desktop simulation.
Rotate the device to confirm landscape layouts hold up, and test with the browser's text-size or zoom settings increased.

Common pitfalls

Fixed widths on containers or images. A width: 1200px wrapper forces horizontal scrolling on any screen narrower than that.
Overflow from long words, tables, or code blocks. Add overflow-wrap: break-word for text and wrap wide tables or code in a scrollable container rather than letting them push the page wider.
Touch targets that are too small. Links and buttons should be comfortably tappable; cramped spacing causes mis-taps on phones.
Hiding content instead of reflowing it. display: none on mobile removes information rather than adapting it, which can break navigation or hide key actions.
Viewport meta tag missing. Without <meta name="viewport" content="width=device-width, initial-scale=1">, mobile browsers assume a desktop width and zoom out.

How responsive themes relate to static site generators

Static site generators such as Jekyll separate content from presentation, so responsiveness usually lives in the theme rather than in each page. A theme ships the CSS, layout templates, and media queries; when you pick a theme, you are choosing a pre-built responsive (or non-responsive) foundation. The OpenBVE project homepage, for example, is built on a Jekyll theme and lists responsive among its theme keywords, which signals that the layout is intended to adapt across screen sizes. If you use such a theme, you inherit its breakpoints and grid behavior, and you can adjust them in the theme's stylesheet or override them in your own CSS rather than rewriting the layout from scratch.

When evaluating any theme or template, the same tests above apply: resize it, check for overflow, and confirm that navigation and content remain usable at phone widths before committing to it.