Skip to main content Skip to list of styles
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Styles

Devices

Provide services for a variety of screen sizes as well as print media.

Contents

Device sizes

Responsive breakpoints are referred to in relative size terms rather than specific devices such as "desktop", "tablet" and "mobile". This is because of the huge variation of devices available.

TNA Frontend has definitions for four different device sizes:

The device sizes used in TNA Frontend
Device size Description Pixel width
large desktop-like devices 1025px and above
medium landscape handheld devices 769px to 1024px
small portrait tablets 481px to 768px
tiny portrait mobile phones 480px and below

Media queries

Use the provided media tools from TNA Frontend to help you with media queries. 

@use "@nationalarchives/frontend/nationalarchives/tools/media";

.my-div {
  display: flex;

  @include media.on-tiny {
    flex-direction: column;
  }
}
Device sizes affected by each media query
Query Tiny Small Medium Large
on-tiny Yes No No No
on-small No Yes No No
on-medium No No Yes No
on-large No No No Yes
on-mobile Yes Yes No No
on-smaller-than-large Yes Yes Yes No
on-larger-than-tiny No Yes Yes Yes
on-larger-than-mobile No No Yes Yes

Styles

Back to top