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.
Note: Use the new, more intuitive CSS classes to adjust the gaps in CMS blocks: Adjusting gaps in CMS blocks
ThemeWare® "Column" CMS block
Columns in CMS blocks have a fixed padding of 40px (2x 20px) in Shopware 6. ThemeWare® provides you with various CSS classes to change this spacing.
The ThemeWare® CSS column spacing classes work for ThemeWare® "Column" CMS blocks as well as most standard CMS blocks from Shopware.
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.
Details
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
In mobile viewports, columns are represented one below the other. They have a fixed defined margin of 0px. ThemeWare® version 2.1 and higher provides you with various CSS classes: you can change this spacing.
The CSS classes work for ThemeWare® "Column" CMS blocks as well as most standard CMS blocks from Shopware.
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. |
Note: How to insert the CSS classes please find in the article ThemeWare® CSS classes for Shopping Experiences.
Details
Examples
ThemeWare® "Grid" CMS blocks
You can also use the above-mentioned CSS classes for "Column" blocks in "Grid" blocks from ThemeWare®, but we have introduced new, more intuitive CSS classes for these with ThemeWare® 3.2.0 and recommend using these new CSS classes in future.
You can find more information on this in the following article:
Adjusting gaps in CMS blocksNew CSS classes with ThemeWare® 3.2.0
With ThemeWare® 3.2 we have added new CSS spacing classes for ThemeWare® "Grid" and "Columns" CMS blocks. These combine the functionality of the two CSS classes twt-cms-col-padding and twt-cms-col-margin mentioned above.
The new CSS "Gap" classes work in "Grids" and in the "Columns" blocks of ThemeWare®.
You can find more information on this in the following article:
Adjusting gaps in CMS blocksLast updated
