Page History

...

The classes "xs-<column number>-col" can be applied on blocks and it will automatically change to the specified number of columns for any existing Form Container field.

For example:Don't do:

Example 1. Simple one size selector with panel-w

@include panel-w('md') { // md size, 
  .dhxform_obj_material > .dhxform_base.f-3-col, 
  .dhxform_obj_material > .dhxform_base.f-4-col {
    
  }
}

Do 

Example 2. Multiple sizes selector with panel-w mixin and grid-column mixin usage:

@include panel-w(('md','xs')) { // xs and sm
  > .dhxform_obj_material > .dhxform_base.f-3-col, 
  > .dhxform_obj_material > .dhxform_base.f-4-col {
    grid-template-columns: repeat(2, 1fr);
    > .col1, > .col3 {
      @include grid-column(1);
    }
    > .col2, > .col4 {
      @include grid-column(2);
    }
  }
}

Notice in this exampleExample 2, we wrote base styling for all the form containers that have 3 or 4 columns to be repositioned on 2 columns when panel is containersize sm.

In the don't do first example, the selector is not taking into account the levels. so it would look inside any nested panels. This selector would be wrong: 

...