All content on your Pixieset Website is automatically converted into alternative versions for mobile devices. This helps optimize your content so it is easy to view on smaller displays. Standard content blocks convert automatically and the mobile versions cannot be edited. With Flex Blocks, you have the option to edit the mobile and tablet layouts of the block separately. By default, we will still automatically optimize the content for you but you have the option to make adjustments so that the mobile versions better match your vision.

While in the Flex Editor, you will see the Desktop, Tablet and Mobile icons listed above. Simply click on each icon to view how the block appears in each format.

By clicking on one of the device icons, you can view and make specific changes to that layout. You can resize and reposition individual elements to your liking across devices. You can also rearrange layers for each format and it will not affect the others.

For example, you may like the look of a block on desktop but want to increase the size and position of photos in the tablet layout. By clicking on the tablet icon, you can rearrange the photos independently without affecting the desktop version.

Note: Each version of a block must still share the same elements, fonts and colors settings. Only the sizing and positioning can be adjusted for each format.

At the bottom of each block, you will find an arrow button which you can drag up or down to customize the overall size. This is handy if you have a certain arrangement on a particular format and you wish to adjust the block size to better fit the elements inside.

Hint: The block will automatically expand downwards if you drag and drop an element towards the bottom.

While you’re editing the mobile version of a Flex block, the recommended approach is stacking elements vertically to better suit the size and orientation of most phone displays. To help rearrange elements, simply click on any element and use the arrows on the right to move it up or down the block. Using this method ensures any adjacent elements remain visible by being stacked above or below.

When working with text elements, blank space may cause adjacent elements to get misplaced on smaller displays and mobile devices. Ensuring the text elements are kept tight to the text will help designs be more consistent.