Responsive Grid Entry Classes

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 )

Sample Snippets: