Relative width CSS classes for theme layouts | HCL Digital Experience

To assist with making the elements of a page responsive to various widths, relative width CSS classes have been added to the theme layouts. These classes are marker classes only. There are no styles that are defined for these classes by default. They are there on the containers, rows and columns, of the layouts so that you can define your own styles that are associated with the classes as needed to make your page elements responsive to various widths.

There are two types of relative width classes, and one of each is used on each layout container.

Semantic type, one of:

wpthemeThin

wpthemeNarrow

wpthemeMedium

wpthemeWide

wpthemeFull

These types allow for up to five variations in width and are described by using common width words, such as narrow and wide.

Grid type, one of:

wpthemeCol1of12

wpthemeCol2of12

wpthemeCol1of5

wpthemeCol3of12

wpthemeCol4of12

wpthemeCol2of5

wpthemeCol5of12

wpthemeCol6of12

wpthemeCol7of12

wpthemeCol3of5

wpthemeCol8of12

wpthemeCol9of12

wpthemeCol4of5

wpthemeCol10of12

wpthemeCol11of12

wpthemeCol5of5

wpthemeCol12of12

These types allow for up to 16 variations in width and are described by using a numbering system of nofn width units. At first glance it looks like a simple numbering system where a layout with five columns would use wpthemeCol1of5, wpthemeCol2of5, wpthemeCol3of5, wpthemeCol4of5, and wpthemeCol5of5 to number the columns. However, the best way to look at this system is not as the number of the column, but rather as the number of width units that the column takes up on the page. So, wpthemeCol2of5 means that the column takes up two of five width units of the page, or 2/5ths of the width of the page, and wpthemeCol8of12 means that the column takes up 8 of 12 width units of the page, or 3/4ths of the width of the page. So, a layout with five columns of equal width would use wpthemeCol1of5 on all of the columns.