Can't find what you're looking for? Search below:

Your ProPhoto Version

Responsive appearance settings

As explained on our Understanding responsive site design page, ProPhoto utilizes a concept called breakpoints. These are thresholds of your display width, where the site will modify itself to enhance user experience for that particular display size/viewport.

While it’s impossible to control every aspect of these breakpoints, ProPhoto does provide customization options where it makes sense. In the layout editor, the three options provided are breakpoint appearance settings, breakpoint visibility settings and breakpoint column stacking. When previewing pages to test these customizations, look for the breakpoint size in the ProPhoto bar corresponding to phone, tablet, laptop and desktop.

Breakpoint appearance settings

Whenever you are editing a block, row or column in the editor, for various appearance settings, you may see the following:

Breakpoint Appearance Icon Display

Whenever you see those icons, it means that ProPhoto provides override options for that particular customization that can be applied to different devices/viewport sizes.  If you hover over any of the icons, you will see a handy little tooltip explaining what each means.

Breakpoint appearance settings tool tips

When the icon on the far left is selected:

Breakpoint settings applied to all devices

The customization settings made will apply for all devices/viewports.  But the other four icons allow you to override the customization settings for specific devices or display sizes.  For example, if you wanted right and left padding of columns in a particular row to be 0% on all device types except tablets (which will have 2% padding), you’d click the tablet icon and edit to change the settings to 2%.

These breakpoint appearance settings are generally available for padding, border and height options on your blocks/rows/columns.

Breakpoint visibility settings

By default, any block, row or column that you’ve created in the layout editor will display on all device types and viewport sizes.  But, what if you want to show or hide certain elements only for certain devices?  ProPhoto provides a visibility setting for all block, row and column customizations to do just that.

Block Visibility Settings Display

Hovering on any of the device icons will give you a helpful tooltip description of what will happen should you click the icon.

Breakpoint Visibility Appearance Tooltip Example

Simply click the icon and you’ll see the following display, indicating that that particular block, row or column will not be displayed on that particular device/viewport.

Breakpoint Visibility Hidden Example

Again, this is very helpful if there are certain elements you want to only show at certain breakpoints/display sizes.

Breakpoint Column Stacking

If you create multiple columns within one row, ProPhoto will try hard to keep those columns side by side until it determines that the columns are too small and should be stacked one upon another.  However, if you want to control this breakpoint yourself, so that columns always stack one upon another on certain devices, you can do so with the Row Column Stacking option in the Row Appearance settings area.Row Column Setting Options Area

With this setting, you can choose whether columns will always stack on tablets and phones, or just phones.

Row Column Stacking Customization Options