Construct Framework

By default, Construct will size adjacent module and content column widths proportionality. For example, if there are two modules side by side, each will be 50% of the total space available. In same cases, you may wish to change this behavior and disproportionately size certain modules.

In this example, we want have three modules side by side,  and we would like the first to occupy 50% of the available width, and the two remaining modules to each be 25%. Since we have three modules side by side, they are 33% by default.

If we know the specific module positions that we wish to customize the widths for, we can simply add specific rules to our custom style sheet. For example

#content-above-1 {width:50%;}
#content-above-2 {width:25%;}
#content-above-3 {width:25%;}

We can also make use of other CSS techniques and create less specific rules such as:

#content-above div:nth-of-type(1){width:50%;}
#content-above div:nth-of-type(2){width:15%;}
#content-above div:nth-of-type(3){width:15%;}

The above example does not rely on using specific module positions.

• < Prev
• Next >