The Alignment option allows you to set your preferred text, icon, or button alignment. You may select from the standard left, center, or right align:

This option is typically found on the Style tab of the settings panel for most page tools and elements, such as the Image tool:

For text, this setting is usually in the TYPOGRAPHY > FONT section of the Style tab:

The screenshot below features an icon group using left alignment:

Here is an example of an icon group with center alignment:

Below is the same icon group with right alignment:

The left, center, or right alignment options work as toggles, which can be turned on and off. If no option is selected, the default setting (such as one set by the theme) will dictate the alignment.

From the Alignment section for most lesson tools, the new alignment UI also features a responsive device icon, which helps you adjust alignment according to device size:

Simply click this icon to shift to a tablet/iPad screen size and add your alignment settings (the icon will change and you will see the Page Canvas resize to reflect a tablet screen):

Click the device icon again to repeat this process for phone screens:

If you’d prefer not to specify settings for each device size, the general settings defined for the desktop will apply to all device sizes.

If no further changes are needed, click SAVE to save your changes or CANCEL to close without saving. Otherwise, you may proceed with any additional adjustments.

When defining length, height, margin, and padding settings in C4EBridge, not only can you use an absolute unit value (px), but, depending on the setting, also relative em, rem, %, vw, and vh units.

To learn more about absolute and relative CSS units, including what each of the relative units is relative to, and which browsers support which units, visit the W3Schools website.

AVAILABLE UNITS IN LESSON EDITOR LAYOUTS

When editing your lessons in the Lesson Editor, the absolute px unit will always be available for every setting. As for relative settings, the units available depend on the specific setting and whether the applicable units have been enabled for that particular setting. For easy reference, the following table shows which CSS units are enabled for which settings:

If a specific setting is not listed in this table, it is likely that the only available unit is px.

The VW unit refers to viewport width, where the viewport is usually the browser window for purposes of the C4EBridge.

When you set a font size using the vw unit in a tool’s Typography section, the actual font size in pixels is calculated using the CSS calc() function, with the following formula: calc( base-font-size + 1vw). If the global base font size is 16px, the calculation is: calc(16px + 1vw).

By using a base font size in this calculation, the font size scales more slowly as viewport width decreases, producing a better result for all device sizes.

WHEN TO USE ABSOLUTE OR RELATIVE UNITS

When deciding whether to use absolute or relative units, you must consider such factors as design, accessibility, and media queries. With so many things to consider, there is no simple answer to whether absolute or relative units should be used (and, if relative, which one).

To guide you in making this decision, the following helpful resource is a great video tutorial for beginners: Typography units (em, rem, px, %) for beginners – Webflow CSS tutorial (video).

Most browser versions supported by C4EBridge support all the CSS units available for layouts. However, if you are planning for your website to be used in a restricted browser situation, check the Browser Support table at the W3Schools site for compatibility.