Your Pixieset Website is designed to switch between desktop, tablet, and mobile layouts depending on the devices your site visitors are viewing from. You can preview these layouts from your site builder to understand how your content will be laid out.

This article will go through some ways to easily adjust your content’s layout on mobile and tablet layouts specifically.

Note: The ability to independently adjust your site’s tablet and mobile layouts is available on any site template, with the exception of classic templates. If you are using a classic template, some features and steps may be different or unavailable.

On this page:

• Editing your site’s mobile and tablet layouts
  • Adjusting the position and size of elements
  • Stacking elements
  • Arranging overlapping elements

Editing your site’s mobile and tablet layouts

Desktop, mobile, and tablet views can be adjusted independently of each other. This allows you maximum control over how your content appears, no matter the device.

If you want to adjust how a part of your site appears on mobile and tablet views, you can do this by accessing the specific block’s Flex Editor:

1. Hover over the specific block and click Open Editor.
2. At the top of the editor, shuffle between desktop, tablet, and mobile views.
3. Within a specific view, customize how your content is laid out with the tools available through the editor.

Note: Your block’s desktop, tablet, and mobile layouts must share the same elements, fonts, and colors settings.

Adjusting the position and size of elements

You can freely resize and reposition existing elements (e.g. text, photos, buttons, etc.) in your mobile and tablet layouts.

1. In the editor, click to highlight a specific element
2. Drag it into your preferred position, or drag its outline to resize it.

Tip: Need more space for your elements while editing your mobile or tablet layout? At the bottom of the block, click and drag the green arrow downwards to expand the block size.

Stacking elements

To ensure an uncluttered viewing experience, elements that appear side-by-side on larger screens are automatically stacked vertically on smaller, mobile-oriented layouts. You can rearrange the order in which a block’s elements appear:

1. In the editor’s mobile view, click to highlight a specific element.
2. Click ↑ or ↓ to move the element into your preferred order.

Tip: If you have multiple elements arranged together in a specific format, consider grouping them so they move together. Do this by holding down shift to select your elements, and then press ⌘ + G (Mac) or Ctrl + G (Windows).

Arranging overlapping elements

Blocks that contain overlapping elements can have some parts unintentionally covered when the layout is adjusted to fit the narrower screen. In these cases, you can easily reorder your layers to make sure they are correctly stacked:

1. In the editor, click the Layers icon in the top right.
2. Drag to reorder your elements. Layers at the top will appear above layers listed underneath.