Responsive & Breakpoints

TL;DR / Overview

Responsive design ensures that your website looks great on all devices—from phones to desktops. This article explains how media queries work, how to choose breakpoints, and how Nilead gives you flexible tools (including custom breakpoints and responsive image support) to build adaptive, future-proof websites.

Prerequisites

• Basic understanding of CSS and website layout

• A project open in the Nilead Visual Editor

• Access to global styles or page-level stylesheets

• (Optional) Familiarity with HTML img tags and attributes

Media Queries: What They Are

Media queries let you apply CSS styles based on specific characteristics of the device or browser. They're essential for responsive design.

Example:

/* When the browser is at least 600px and above */
@media screen and (min-width: 600px) {
  .element {
    font-size: 1.2rem;
  }
}

This applies the style only when the browser is 600px wide or more.

Anatomy of a Media Query

Media Types

• all – Default. Matches all devices.

• screen – Screens like desktops, tablets, phones.

• print – Print preview and paper.

• speech – Screen readers and similar tools.

Media Features

These describe specific device traits:

@media (orientation: landscape) { ... }
@media (hover: hover) { ... } // Detects if pointer can hover
@media (pointer: fine) { ... } // Detects precision of input

Combine media types and features using and, ,, or not.

Example of advanced nesting:

@media screen and (min-width: 50em), print and (not (color)) {  body { background: lightgray; }
}

Media types

• all: Matches all devices

• print: Matches documents that are viewed in a print preview or any media that break the content up into pages intended to print.

• screen: Matches devices with a screen

• speech: Matches devices that read the content audibly, such as a screenreader.

Media features

@media (orientation: landscape) {     
  body {
    color: rebeccapurple;
  } 
}

Display quality

Color

Interaction

@media (hover: hover) {
  body {
    color: rebeccapurple;
  }
}

NOTE with hover you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.

User Preferences

Using min- and max- to match value ranges

body {
  background-color: #fff;
}

@media (min-width: 30em) and (max-width: 80em) {
  body {
    background-color: purple;
  }
}

Nesting and complex decision making

@media (min-width: 20em), not all and (min-height: 40em) {  
  @media not all and (pointer: none) { ... }
  @media screen and ( (min-width: 50em) and (orientation: landscape) ), print and ( not (color) ) { ... }
}

NOTE: To combine media features you can use and in much the same way as we have used and above to combine a media type and feature.

If you have a set of queries, any of which could match, then you can utilize logic by using commas to separate these queries.

You can negate an entire media query by using the not operator.

Choosing Breakpoints

Breakpoints define when your design adjusts layout for different screen sizes. Instead of targeting each device, target ranges.

Typical breakpoints:

• < 600px: Phones

• 600px – 1024px: Tablets

• 1024px – 1440px: Laptops

• 1440px+: Large screens

Nilead allows you to define custom breakpoints for each layout. Check your Style document or design system to configure them.

NOTE Most mobile browsers lie about their viewport width. Non-responsive sites commonly look really bad when rendered in a narrow viewport, so mobile browsers usually render the site with a viewport width wider than the real device width by default (usually 960 pixels) and then shrink the rendered result so that it fits in the display.

Include this meta tag for accurate mobile scaling:

<meta name="viewport" content="width=device-width,initial-scale=1">

⚠️ Note: Many mobile browsers lie about screen width unless viewport is set, making non-responsive sites look broken.

NOTE with Nilead you can define your own breakpoints, you can even have different breakpoints for different layouts. Please check the Style document to know how to define your own breakpoints.

Responsive Images

Large images can slow down performance. Use responsive images to load only what’s needed:

Using srcset with w descriptors:

<img alt="A baby smiling" srcset=" baby-s.jpg 300w, baby-m.jpg 600w, baby-l.jpg 1200w " sizes="(max-width: 600px) 100vw, 600px" >

Using x descriptors for screen density:

<img src="baby-lowres.jpg" srcset="baby-highres.jpg 2x" alt="A baby smiling" >

This loads a higher-resolution version on retina/high-DPI screens.

💡 Pro Tip: Default to low-res images (src) and let the browser pick a better one when needed.

Using srcset

<img 
  alt="A baby smiling with a yellow headband."
  srcset="
    baby-s.jpg  300w,
    baby-m.jpg  600w,
    baby-l.jpg  1200w,
    baby-xl.jpg 2000w
  "
  sizes="70vmin"
>

We provide multiple versions of the same image and use w descriptors in srcset to label them by width (e.g., baby-s.jpg as 300w). To help the browser choose the best image, we pair srcset with the sizes attribute, which tells it how much space the image will occupy.

You can also use the X descriptor:

<img 
  alt="A baby smiling with a yellow headband."
  src="baby-lowres.jpg"
  srcset="baby-highres.jpg 2x"
>

We set the default src to the low-res (1×) version of the image for faster loading. A 2× version is also provided. On high-density displays, the browser will automatically use the higher-res image.

FAQs

1. Can I define different breakpoints for each layout in Nilead?
Yes. Each layout can have its own set of breakpoints. Define them in the Style config.

2. Does Nilead support responsive images automatically?
You’ll need to set up srcset manually or use tools in the Media Manager to define image variants.

3. Do I need to write media queries in code?
Not always. The Visual Editor supports responsive toggling, and your custom styles can use @media rules for finer control.

4. Can I test breakpoints without publishing the site?
Yes. Use Nilead’s Preview Mode and switch between device widths to test responsiveness.

5. Are shortcuts responsive by default?
Shortcuts inherit their styles and can be made responsive via the Visual Editor like any other widget.