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:
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.
When the icon on the far left is selected:
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.
Hovering on any of the device icons will give you a helpful tooltip description of what will happen should you click the icon.
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.
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.
With this setting, you can choose whether columns will always stack on tablets and phones, or just phones.