View Source

In this article, we will show how to create left-to-right placement of form elements when collapsing into a single column (under screen width constraint).

Knowledge Base for DX 7 > Left to Right Flow of Form Element Placement in Mobile View > screenshot.png

Figure 1: Width of more than 900px (top), and less than 900px (bottom)

Add this CSS code into a Custom HTML element.

<style>
@media only screen and (min-width: 900px) {
    #section1 .form-cell{
        width: 48%;
    }
}

@media only screen and (max-width: 900px) {
    #section1 .form-cell{
        width: 98%
    }
}
</style>

Edit the column of this section to "Horizontal Layout"

Knowledge Base for DX 7 > Left to Right Flow of Form Element Placement in Mobile View > screenshot-2.png

Figure 2: Column Properties as Horizontal Layout

When the screen width is more than 900px, fields will be displayed in 2 columns layout and when it is less than that, it will become a 1-column layout with field placement following left-to-right placement into single column.