Reviewing at Different Screen Sizes
NotedWP includes four breakpoints so you can review your site across common device widths. Each breakpoint simulates a different screen size, making it easy to catch responsive layout issues.
The Four Breakpoints
Desktop (Responsive)
The default breakpoint. Your page renders at the full width of your browser window, just as a visitor would see it. As you resize your browser, the page responds naturally.
Fixed (1440px)
A locked desktop width of 1440 pixels. The page renders inside a device frame with fixed dimensions. Use this when you want consistent feedback at a standard desktop resolution.
Tablet (768px)
Simulates a tablet-width viewport at 768 pixels. The page renders inside a device frame, showing how your layout adapts to medium-sized screens.
Mobile (375px)
Simulates a mobile viewport at 375 pixels. The page renders inside a device frame, showing your mobile layout and any responsive design adjustments.
Switching Breakpoints
Use the breakpoint tabs in the toolbar to switch between views. Click any tab to load the current page at that width. The page re-renders inside the appropriate device frame (for non-desktop breakpoints).
Device Frames
When viewing the fixed, tablet, or mobile breakpoint, NotedWP wraps the page in a device frame with fixed dimensions. This ensures the viewport stays consistent regardless of your actual browser size. The frame is purely visual and does not affect how the page renders.
Breakpoint-Specific Feedback
Pins and annotations are tied to the breakpoint where they were created. A pin placed on the tablet view only appears when you switch to the tablet breakpoint. This prevents clutter and keeps feedback relevant to each screen size.
If you need to leave feedback about the same element at multiple sizes, create a separate pin at each breakpoint.
Tool Availability by Breakpoint
Not every tool is available at every breakpoint:
| Tool | Desktop | Fixed | Tablet | Mobile |
|---|---|---|---|---|
| Pin (C) | Yes | Yes | Yes | Yes |
| Cursor (V) | Yes | Yes | Yes | Yes |
| Element Selector (E) | Yes | Yes | Yes | Yes |
| Rectangle (R, Pro) | No | Yes | Yes | Yes |
| Arrow (A, Pro) | No | Yes | Yes | Yes |
| Freehand (F, Pro) | No | Yes | Yes | Yes |
| Text Edit (T, Pro) | Yes | Yes | Yes | Yes |
Drawing tools are disabled in the desktop responsive breakpoint because the variable width would cause annotations to shift when the browser is resized.