How to change CPB Layout to vertical via CSS

There are three build-in layouts in CPB (Aloha, Alpine White and Alpine White II)

The first two are displayed horizontally on desktop screens by default (the preview is located to the left of the custom options panel). If you need to display our interface vertically (the preview will be above the custom options panel), you can use the third theme - Alpine White II. But in some cases, you may need to display one of the other two themes vertically.

You need to create a "customproductbuilder.css" file in case it had not been created earlier:
This page explains how to connect a CSS file to the 2.0 themed (Dawn and others)
In this article, you can find out how to connect a CSS file to other themes.

Then, add the code below:

.cpb-layout {
 flex-direction: column !important;
}
.cpb-layout > * {
 max-width: none !important;
}
.cpb-preview-sticky {
 height: auto !important;
}
.cpb-preview-layers > div {
 min-height: 0 !important;
}

Now, all of the templates will be vertical on the storefront.