Responsive by Default: Layout, Images and Type
Need this adapted for your organization? Work with AstroWeb.dev — Astro services by NViewsWEB.
AstroWEBTheme
Build with AstroWeb.dev
Featureresponsivecssperformance

Responsive by Default: Layout, Images and Type

Fluid type, width tokens, responsive utility classes and srcset images let one page fit phones, tablets and wide screens without extra work.

By

Responsive behaviour is built into the base styles, the type scale and the image component, so most pages need no media queries of their own.

The viewport

core/layouts/base.astro sets <meta name="viewport" content="width=device-width, initial-scale=1">, and meta name="color-scheme" lets the browser match light and dark system settings.

Fluid type

Font sizes in src/site/config/styles/fonts.mjs are clamp() expressions from xxs to 6xl. Text grows smoothly with the viewport between a minimum and a maximum size, and headings map to those steps (h1 uses 5xl, body uses base). No breakpoint jump is needed for text.

Width tokens

src/site/config/styles/variables.mjs defines the layout widths: max-width and site-width 1280px, content-width 720px for reading, sidebar-width 360px, toc-width 320px and featured-image-width 960px. Change one value and every layout follows.

Breakpoints and utilities

Utility files in core/styles/main/ use media queries around 768px, 1024px and 1280px, and responsive classes carry a prefix. For example, the post hero uses max-w-95 w-90 lg-max-w-featured lg-w-100 full-max-w-featured full-w-100: narrow on phones, full featured width on large and full layouts. Page CSS in src/site/styles/pages/ can add its own rules. Table layouts such as the Free vs Pro comparison use data-label attributes so cells stay readable on small screens.

Responsive images

ResponsiveImage builds srcset and sizes from the generated variants (380, 640 and 1280 pixel widths by default) and chooses the width for each screen class from siteImages.variants and siteImages.breakpoints (mobileMax 460, tabletMax 1079, desktopMin 1080, fullMin 1440). It keeps the aspect ratio so the page does not shift as the image loads. Details are in Feature image workflow.

The header has a mobile menu toggle (MobileMenuToggle.astro) and separate logo sizes for desktop and mobile (logoWidthDesktop and logoWidthMobile in images.mjs).

Test it

  1. Run the dev server and open the browser’s device toolbar.
  2. Check widths of about 360, 768, 1080 and 1440 pixels.
  3. Confirm there is no horizontal scroll, text stays readable and the correct image width loads in the network panel.
  4. Re-test in dark mode.