Spacing is an important design element to consider when building your photography website. When representing your brand and portfolio, well-spaced content can make your site feel like organized and intentional, encouraging visitors to stay and scroll through.
Each of Pixieset’s templates optimize how your content is spaced out, ensuring your photo, heading, and calls to action look their best across all devices. If you want finer control over the design, your site’s spacing can be customized with pixel-level precision.
Note: Some content blocks such as banners are designed to be edge to edge. These blocks will be unaffected by spacing settings.
On this page:
Max page width
Your website’s max page width setting controls whether your content scales up or remains at a fixed width on larger screens. Increasing the page width gives your content a spacious, edge-to-edge look. Decreasing the page width keeps your content centered and focused.
To adjust your max page width:
- Go to Settings > Spacing.
- Drag the slider or enter a custom pixel value to adjust your pages’ max width.
Note: If your page width becomes larger than your current browser window, your content may appear to stop scaling. We recommend previewing it on a larger screen to see the full effect.
Site margin spacing
Your website’s site margin setting dictates how much horizontal space is between your content and the edges of the screen. It is helpful to think of the site margin as a gap on each side of your content that prevents it from touching the edge of your browser window.
To adjust your site margin:
- Go to Settings > Spacing.
- Drag the slider or enter a custom width value to adjust your pages’ site margin.
Base block padding
Base block padding is the amount of vertical space above and below each content block. You can think of it as breathing room between one section of a page and the next.
To adjust base block padding:
- Go to Settings > Spacing.
- Drag the slider or enter a custom width value to adjust your base block padding.
Tip: If you want to modify the padding of a specific block, hover over it and click its settings icon instead.
Individual element spacing
If you want to adjust how specific elements (e.g. text, images, buttons, etc.) are laid out within a block, you can adjust this by accessing the block’s drag-and-drop Flex Editor.
To customize the position of individual elements in a block:
- Hover over the block and click Open Editor.
- In the editor, freely drag and drop existing elements.
To learn how to freely reposition elements of your content, see our guide on Flex Editor here.