Skip to main content

Sizing & Responsive Design

AutoPod widgets are responsive by default — they adapt to the container you place them in. Here's how sizing works and how to control the appearance on different screen sizes.

How widgets size themselves​

Widgets fill the width of their parent container and adjust their height based on content. If you place a widget in a narrow sidebar, it adapts. If you place it in a full-width content area, it expands.

You don't need to set explicit width or height on the widget element — just place it in the right container and it handles the rest.

Controlling width​

To control how wide a widget appears, wrap it in a container with the width you want:

<!-- Full width -->
<div data-autopod-widget="episodes" data-station="my-station"></div>

<!-- Constrained to 600px -->
<div style="max-width: 600px;">
    <div data-autopod-widget="episodes" data-station="my-station"></div>
</div>

<!-- In a CSS Grid layout -->
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1rem;">
    <div data-autopod-widget="episodes" data-station="my-station"></div>
    <div data-autopod-widget="schedule-compact" data-station="my-station"></div>
</div>

Style isolation​

Widgets render inside a Shadow DOM — their styles are isolated from your website's CSS, and your website's CSS doesn't affect the widget. This means:

  • Widgets look consistent regardless of your website's styling
  • Your website's fonts, colours, and layout rules won't bleed into widgets
  • Widget styles won't interfere with your page

Customising appearance​

While widgets are style-isolated, you can control their visual appearance through data attributes:

Theme​

<!-- Follow visitor's device preference -->
<div data-autopod-widget="episodes" data-station="my-station" data-theme="system"></div>

<!-- Force dark mode -->
<div data-autopod-widget="episodes" data-station="my-station" data-theme="dark"></div>

<!-- Force light mode -->
<div data-autopod-widget="episodes" data-station="my-station" data-theme="light"></div>

Accent colour​

<!-- Use a custom accent colour -->
<div data-autopod-widget="player" data-station="my-station" data-accent-color="#e63946"></div>

Variant​

<!-- Default styling (shadow and border) -->
<div data-autopod-widget="player" data-station="my-station" data-variant="default"></div>

<!-- Minimal styling (reduced visual weight) -->
<div data-autopod-widget="player" data-station="my-station" data-variant="minimal"></div>

<!-- Borderless (transparent background, no container) -->
<div data-autopod-widget="player" data-station="my-station" data-variant="borderless"></div>

Border radius and shadow​

<!-- Rounded corners -->
<div data-autopod-widget="player" data-station="my-station" data-border-radius="lg"></div>

<!-- No shadow -->
<div data-autopod-widget="player" data-station="my-station" data-shadow="none"></div>

Available options:

  • Border radius: none, sm, md, lg, xl, full
  • Shadow: none, sm, md, lg
  • Padding: none, sm, md, lg

Mobile behaviour​

Widgets are designed mobile-first:

  • Episode lists stack vertically and scale text
  • Schedule grids switch to day-by-day tabs on narrow screens
  • Carousel widgets become touch-scrollable
  • Mini bar adapts to screen width
  • Search results scale to available space

No extra configuration needed — responsive behaviour is built in.

Performance​

  • Lazy loading — Widget components only load when they're on the page
  • Shared audio engine — Multiple widgets share a single audio player instance
  • Efficient updates — Widgets fetch data from the API only when needed
  • Small footprint — The SDK is lightweight and doesn't slow down your page