In the Total theme all theme grids (grid builder modules, footer widgets, image gallery…etc) make use of the same html structure for creating the columns. You can have a look at a sample grid HTML on this documentation article. As you can see every grid has a “wpex-row” class surrounding it and then each column has a “col” class followed by a class in the following format “span_1_of_{columns}” where {columns} is the number of columns you want for the grid. So if you want to have a 2 column grid your column classes would be “col span_1_of_2” the span_1_of_2 class will add a 50% width to the column.
Now, for responsiveness the theme also has some built-in classes you can make use of and the class names are in the following format:
span_1_of_{columns}_{device}So you would replace {columns} with the number of columns you want and {device} with the prefix (see below) for the device you are targeting.
Device prefixes:
- tl => tablet landscape ( max-width: 1024px )
- tp => tablet portrait ( max-width: 959px )
- pl => phone landscape ( max-width: 767px )
- pp => phone portrait ( max-width: 479px )