Media Queries
Learn how to preview and optimize your chart for different screen sizes using mobile, tablet, and desktop modes.
Media queries let you edit and preview your chart across three screen sizes — Mobile, Tablet, and Desktop. This is essential when you embed a chart on a website viewed on many devices, or when you want your visualization to look great at any size.
Think of Mobile mode as your base/default editing mode. All settings you make in Mobile mode apply everywhere. In Tablet and Desktop mode, any settings you change act as overrides that only apply at that screen size. This way you only need to adjust what's different for larger screens — bigger fonts, more detail, adding a legend, etc.
Chart resizing with the slider
Before diving into media query modes, it helps to understand how the chart size itself works:
- Hover over the toolbar area (where the chart title appears if you saved it) — the title is replaced by a horizontal slider.
- Drag the slider left or right to change the chart width from a minimum of 320px up to the maximum width your screen allows.
- The chart height is calculated automatically from the Aspect Ratio setting (defaults to 3:2).
- The current width is shown as numbers on the left and right of the slider:
- The left number is the minimum (320px).
- The right number is the maximum (your screen's available width).
- Click either number to increase or decrease the width in steps of 10px (always rounded to 10px). Useful for fine-tuning the width without dragging.
- As you drag or click, the chart resizes immediately so you can see exactly how it looks at any width.
Media query modes
DataPicta provides three editing modes, each corresponding to a standard screen size range:
| Mode | Width Range | Description |
|---|---|---|
| Mobile (default) | ≤ 480px | Base/default editing mode. All settings apply everywhere unless overridden in Tablet or Desktop mode |
| Tablet | > 480px and < 960px | Override mode for medium screens. Settings here apply only when the chart width falls in this range |
| Desktop | ≥ 960px | Override mode for large screens. Settings here apply only when the chart width falls in this range |
How it works
- Mobile is the default mode. Build your chart here first — add data, configure visual settings, style everything. These are your base settings that apply to all screen sizes.
- Switch to Tablet or Desktop mode to override specific settings for larger screens. For example, you might want:
- Bigger fonts on desktop
- A legend that only appears in tablet and desktop mode
- More detail or larger images that would be cramped on a mobile screen
- Different layout settings for the chart elements
What happens when you switch modes
When you switch to Tablet or Desktop mode:
- All panels and settings are available exactly as in Mobile mode — the same input fields, sections, and options.
- Settings you make in these modes act as overrides. The Mobile mode settings remain in effect as defaults, but any setting you change in Tablet/Desktop mode takes precedence in that size range.
- The chart width changes to a size within that mode's range, so you can see how your overrides look at the target screen size. You can still use the slider to explore how the chart looks at different widths within that mode.
- A watermark appears on the chart background showing either "tablet mode" or "desktop mode" as a reminder of which mode you're editing. There is no watermark in Mobile mode since it's the default.
What is NOT visible in Tablet and Desktop mode
When in Tablet or Desktop mode, the settings you made in Mobile mode are hidden from the panels. This is intentional — it keeps the interface clean and avoids confusion. The hidden settings are still active as defaults; you're only seeing and editing the override values for the current mode.
Switching modes
- Look for the mode icon at the top-right of the chart view. It shows one of three icons depending on the current mode:
- Phone icon — Mobile mode
- Tablet icon — Tablet mode
- Desktop icon — Desktop mode
- Click the icon to open a dialog with a short description and three buttons: Mobile, Tablet, and Desktop.
- Click the mode you want to switch to.
- If your screen is too small to show the Tablet or Desktop width range, those buttons are disabled — you won't be able to select them until you're on a larger screen.
Using the slider together with modes
Even after switching to a mode, you can still use the slider to adjust the chart width within that mode's range. This lets you see exactly how your overrides behave at the edges of the size range — for example, how a tablet-sized chart looks at 481px vs 959px.