Adjusting column spacings in CMS blocks
In this tutorial you will learn how to adjust column spacings in CMS blocks using ThemeWare® CSS classes.
ThemeWare® provides you with a comprehensive selection of CSS classes with which you can modify the column spacing in CMS blocks - i.e. the spacing between two columns.
Tip: Please find application examples in our demoshops.
ThemeWare® CSS column spacings
The ThemeWare® CSS column spacing classes work for ThemeWare® Columns and Grid CMS blocks as well as most Shopware CMS blocks.
In the ThemeWare® Grid blocks, this classes also define the spacing between two elements that are displayed in a column on top of each other.
CSS classes
| Class | Block/Section | Description |
|---|---|---|
twt-cms-col-padding-0 | Block | Sets the padding-left/-right for columns in CMS blocks to 0 pixels. |
twt-cms-col-padding-5 | Block | Sets the padding-left/-right for columns in CMS blocks to 5 pixels. |
twt-cms-col-padding-10 | Block | Sets the padding-left/-right for columns in CMS blocks to 10 pixels. |
twt-cms-col-padding-15 | Block | Sets the padding-left/-right for columns in CMS blocks to 15 pixels. |
- | - | 20 pixels is the default column spacing. |
twt-cms-col-padding-25 | Block | Sets the padding-left/-right for columns in CMS blocks to 25 pixels. |
twt-cms-col-padding-30 | Block | Sets the padding-left/-right for columns in CMS blocks to 30 pixels. |
twt-cms-col-padding-35 | Block | Sets the padding-left/-right for columns in CMS blocks to 35 pixels. |
twt-cms-col-padding-40 | Block | Sets the padding-left/-rightg for columns in CMS blocks to 40 pixels. |
Note: How to insert the CSS classes please find in the article ThemeWare® CSS classes for Shopping Experiences.
Example
Note: You can activate or deactivate the ThemeWare® "CSS column padding classes" as required. You can find the configuration in the Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes".
Mobile representation
ThemeWare® 2.1 includes classes for the spacing in mobile viewports - i.e. for the spacing of columns that are displayed one below the other.
CSS classes
| Class | Block/Section | Description |
|---|---|---|
- | - | 0 pixels is the default column margin. |
twt-cms-col-margin-5 | Block | Sets the margin-bottom for columns in CMS blocks to 5 pixels. |
twt-cms-col-margin-10 | Block | Sets the margin-bottom for columns in CMS blocks to 10 pixels. |
twt-cms-col-margin-15 | Block | Sets the margin-bottom for columns in CMS blocks to 15 pixels. |
twt-cms-col-margin-20 | Block | Sets the margin-bottom for columns in CMS blocks to 20 pixels. |
twt-cms-col-margin-25 | Block | Sets the margin-bottom for columns in CMS blocks to 25 pixels. |
twt-cms-col-margin-30 | Block | Sets the margin-bottom for columns in CMS blocks to 30 pixels. |
twt-cms-col-margin-35 | Block | Sets the margin-bottom for columns in CMS blocks to 35 pixels. |
twt-cms-col-margin-40 | Block | Sets the margin-bottom for columns in CMS blocks to 40 pixels. |
twt-cms-col-margin-45 | Block | Sets the margin-bottom for columns in CMS blocks to 45 pixels. |
twt-cms-col-margin-50 | Block | Sets the margin-bottom for columns in CMS blocks to 50 pixels. |
twt-cms-col-margin-55 | Block | Sets the margin-bottom for columns in CMS blocks to 55 pixels. |
twt-cms-col-margin-60 | Block | Sets the margin-bottom for columns in CMS blocks to 60 pixels. |
twt-cms-col-margin-65 | Block | Sets the margin-bottom for columns in CMS blocks to 65 pixels. |
twt-cms-col-margin-70 | Block | Sets the margin-bottom for columns in CMS blocks to 70 pixels. |
twt-cms-col-margin-75 | Block | Sets the margin-bottom for columns in CMS blocks to 75 pixels. |
twt-cms-col-margin-80 | Block | Sets the margin-bottom for columns in CMS blocks to 80 pixels. |
Examples
Last updated
