Creating portlets and page elements | HCL Digital Experience

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.

Your portlet can be placed in a column of any width and run on a device of any screen width. The primary styles for the elements use elastic percentage widths rather than fixed widths in general to be responsive. For certain width columns, you might need to make additional overrides. For example, if something is too large to display correctly in a narrow column, you can add display:none to hide it entirely. You can also add font-size:1.5em for wide columns or font-size:0.8em for narrow columns. To load a smaller version of an image use background-image:url("myImage_small.jpg") for narrow columns.

If you care only about five levels of variation in width or less, then you need only to override for the semantic types. The following example shows three levels of variation:

/* Narrow width columns */
.wpthemeThin .myComponent, .wpthemeNarrow .myComponent {
    ...
}
/* Medium width columns */
.wpthemeMedium .myComponent, {
    ...
}
/* Wide width columns */
.wpthemeWide .myComponent, .wpthemeFull .myComponent {
    ...
}

If you care about more than 5 levels up to 16 levels of variation in width, then you only have to override for the grid types. An example with 8 levels of variation:

/* 1/12th, 1/6th and 1/5th width columns */
.wpthemeCol1of12 .myComponent, .wpthemeCol2of12 .myComponent, .wpthemeCol1of5 .myComponent {
    ...
}
/* 1/4th and 1/3rd width columns */
.wpthemeCol3of12 .myComponent, .wpthemeCol4of12 .myComponent {
    ...
}
/* 2/5ths and 5/12ths width columns */
.wpthemeCol2of5 .myComponent, .wpthemeCol5of12 .myComponent {
    ...
}
/* 1/2 and 7/12ths width columns */
.wpthemeCol6of12 .myComponent, .wpthemeCol7of12 .myComponent {
    ...
}
/* 3/5ths and 2/3rds width columns */
.wpthemeCol3of5 .myComponent, .wpthemeCol8of12 .myComponent {
    ...
}
/* 3/4ths and 4/5ths width columns */
.wpthemeCol9of12 .myComponent, .wpthemeCol4of5 .myComponent {
    ...
}
/* 5/6ths and 11/12ths width columns */
.wpthemeCol10of12 .myComponent, .wpthemeCol11of12 .myComponent {
    ...
}
/* 5/5ths and 12/12ths (full) width columns */
.wpthemeCol5of5 .myComponent, .wpthemeCol12of12 .myComponent {
    ...
}

You can override for both types if you choose, but it is only necessary if you created a layout that does not use both types on all containers.