There are two types of relative width classes, and one of each is used on each layout container.
Semantic type, one of:
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:
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
, 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.
The two class types map to each other in the following way:
Table 1. Relationship of the 2 relative width class types
|Width of the page||Semantic Type||Grid Type|
The Semantic types maps to the following page width amount:
Table 2. Semantic type mapping to page width amounts
|Semantic type||Amount of the page width|
|wpthemeThin||1/12th to 1/5th|
|wpthemeNarrow||1/4th to 2/5ths|
|wpthemeMedium||5/12ths to 2/3rds|
|wpthemeWide||3/4ths to 11/12ths|
|wpthemeFull||all|Creating your own layoutParent topic: Responsive Web Design
When you create your own layout.html
files, it is important to apply one semantic type and one grid type relative width class to each container. Such as wpthemeMedium
. Applying both ensures that those creating portlets and other page elements do not have to define styles for both types. Along with neither type and both types, they also have the choice to define styles for just one of the types, depending on their needs of granularity.
Creating portlets and page elements
When you create portlets and the page elements within them, you can now define your own style overrides as needed. Use these relative width CSS classes to make your page elements responsive to various widths.