Page views | Pinegrow Docs

Here’s everything there is to know about page views.

Pinegrow showing the index.html page of a poetry site, "Pine Tree Poems", on a gradient background in the 1024 px Medium view. — In Pinegrow, most editing happens right on the live page view.

Choosing the size

Users will view your pages on different devices and in at different browser sizes: from large desktop computers, laptops to mobile phones. That’s why you should design your webpages with this flexibility in mind.

Page views can be freely resized so that you can work with your page at different device sizes.

Device size menu for index.html listing responsive widths XS to XL, breakpoints such as 768 px and 992 px, and devices such as iPhone 6. — Device size menu.

Use Device menu to chose one of predefined sizes.

The menu contains:

Sizes defined by frameworks, like Bootstrap, or default Pinegrow sizes. Keyboard shortcuts
CMD +
1,
CMD +
2 and so on are associated with them.
Widths set by responsive CSS breakpoint. Pinegrow discovers breakpoints by analysing stylesheets used on the page. “Manage breakpoints” command is also there.
A set of actuall devices that have both width and height set (the rest of items in this menu only specify the width).

The width and height of the page view can also be set by entering dimensions into the width and height input fields:

Page view header for index.html at LG with the width and height fields showing 1024 px by 600 px, which can be typed in directly. — Input width and height of the page view.

Page views with both width and height can be rotated.

Another way to change the width of the page view is to drag its right edge left or right:

Page view at SM 640 px with its right edge being dragged, a Width 427px tooltip, and a callout reading "Drag the right edge". — Drag the right edge to resize the page view.

Using multiple page views

Not only can you resize the page view - Pinegrow lets you open multiple views of the same page. All page views are editable and all edits are immediatelly synced between them.

Use in the page tab or in the top toolbar to add a new view:

index.html in two page views side by side, MD 768 px and a 494 px narrow view, at 40% zoom, with callouts for zoom level and opening a new view. — Opening multiple page views.

Views are displayed in a row, from left to right.

If the zoom level is set to Fit, views will be resized to fit into the available space. If you use a fixed magnification - 100%, for example - all views might not fit into the space. In that case use the horizontal scrollbar at the bottom to scroll left and right.

Or, click on view icons in the page tab to jump to a page view:

index.html tab with its page view icons, and an MD 768 px page view below, with a callout reading "Jump between page views". — Click on devices in the tab to navigate between page views.

You can select and edit elements on any of the page views. Selected elements will be marked on all page views and all edits synced between them.

NoteHaving too many page views open will impact the app performance. Keep only as many are needed for the task at hand. Closing and reopening page views is easy.

The active page view

In general, it doesn’t matter on which page view you edit the page. But, that’s not the case for CSS editing if you use media queries to target specific devices.

In that case some CSS rules only affect the page when it is displayed at the certaing device size. For example, we might use media query to make the H1 element smaller on mobile devices.

So how does the Style panel decide for which page view to show active CSS rules?

That’s simple when only one page view is open.

When multiple page views are open, the active view is marked by the highlighted style icon:

Two page views of index.html, with the XS 494 px view set as the active view, marked by a brush icon, and a callout "Set as the active page view". — Select the active page view for CSS editing.

You can switch the active view by:

clicking on the
icon above the page view.
Selecting an element on the page view will mark that page view as active.

Closing the page view

Click on the above the page view to close it:

Two page views of index.html with close buttons, with callouts for closing the whole page and for closing one page view when there is more than one. — Closing page views.

When you close the last page view, the whole page will be closed.

Center page views

By default, page views are positioned on the left side of the page area. So, if the width of page views is less than the width of the page area, the empty space will be shown on the right side. That’s the good place for placing various panels.

Sometimes it is better to have the page view front and center, for example, when you’re writing content or focusing on an important design consideration.

To center page views in the page area, right-click on the empty space in the page area and choose “Center page views” option from the menu:

A single MD 936 px page view of index.html centered in the canvas, with the Center page views option checked in the open menu. — Right-click in the page area to choose page view position.

Showing multiple pages side by side

Until here we were talking about multiple views of the same page. That’s great, but sometime it is useful to show different pages side by side.

To do that, you can split the page area by holding the page tab and dragging it…

index.html and home.html page tabs side by side, with a callout reading "Drag one of the page tabs". — Grab the tab…

…to the left or to the right side of the existing page area.

index.html page view with a dashed drop zone on the right edge of the page area, with a callout to drop the page tab to the left or right edge. — …and drag it to the edge of the page area.

This will create two or more page panels. You can freely move page tabs between page panels.

index.html and home.html shown side by side in split page views, with the poem page on the left and the home page on the right. — Two pages shown side by side.

Close an extra page area by closing its pages or by dragging its page tabs to the main page area tab header.