Zenit Design - Themes
Buy themeThemesSupport
EN
EN
  • First steps
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tips
    • Dashboard
    • Theme configuration
    • Dictionary
    • Multiple sales channels
  • Configuration sets
  • Support
    • Read errors
    • Find cause
  • 🎨Styling
    • General
      • Basic layout
      • Product images
      • Produkt Layout-Typ
      • Global background
      • Preloader
      • Accent line
      • Scroll animation
    • Typo & Colors
      • Theme colors
      • Status messages
      • Fonts
      • Typography
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Search
      • Top bar
      • Shop navigation
      • Main navigation
      • Flyout navigation
      • Dropdown navigation
    • Footer
      • Footer
      • Content
      • Columns
      • Columns styling
      • Footer bottom
    • Components
      • Sidebar
      • Sidebar navigation
      • Forms
      • Image & gallery slider
      • Produkt slider
      • Category Listing Slider
      • Pagination
      • Breadcrumbs
      • Cookie banner
      • Offcanvas
      • Backdrop
      • Scroll-Up button
    • Category
      • Category header
      • Hero section
      • Filter
      • Listing actions
      • Product boxes
      • Quickview
    • Product
      • Detail
      • Gallery
      • Description
      • Description navigation
      • Description content
    • Checkout
      • Cart
      • Checkout
  • ⚙️SETTINGS
    • Basic settings
    • Custom field assignment
      • Custom fields for product page details
      • Custom fields for product datasheets
    • Social media icons
    • Marketing text slider
    • Custom tab details page
    • Custom footer columns
    • Custom code
  • 📂Contents
    • Shopping experiences
      • Sections
      • Blocks
        • Elements
          • Image text slider
          • Search banner
          • Text banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Divider
          • Category-navigation
          • Footer navigation
          • Placeholder
        • Commerce
          • Image gallery and buy box with product name & manufacturer logo
          • Image gallery and buy box with product name & manufacturer logo & description
          • Image gallery and buy box with description
          • Image gallery with description and buy box with product name & manufacturer logo
        • Category
          • Category listing
        • Columns
        • Layouts
      • Block inner spacings
      • Block outer spacings
      • Animations
      • CSS Variables
    • Category
      • Hero section
      • Category header
      • CSS classes
      • Category badges
      • Category Icons
      • Products per row
    • Product page
      • Layouts
      • Default layout
      • Gallery mode
      • Custom tabs
      • Videos tab
      • Datasheets
    • Product images
      • Image sizes
      • Aspect ratio
      • File format
      • Product image background
    • Layout type
    • Responsive tables
    • Multilingualism
  • 🎓Tutorials
    • Demodata import
    • Demo theme configuration import
    • Duplicate Child-Theme
    • Customizations
    • Configuration export/import
    • Custom Fields export/import
    • Embed fonts locally
    • Embed fonts locally with child-theme
  • 🛠️Update Guides
    • Child theme update
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Overview
    • Accessibility
      • Typography
      • Colors
      • Images
      • Video
      • Accessibility checker and resources
    • General
      • Copyright notice
      • Wishlist
    • Product layout
    • Licenses
      • Trial version vs full version
      • Changing the licence domain
    • Derivations
      • Child theme
      • Theme duplicate
      • Child theme vs theme duplicate
    • Updates
      • Theme is displayed as incompatible
      • Update is not displayed
    • Known issues
      • Could not assign child-theme
      • Text modules show technical name
      • Theme save error
      • SVG logo is not displayed
      • Search / Input mobile zoom
      • Text is not visible / readable
Powered by GitBook
On this page
  • Spacings (Gutters, gaps)
  • Advanced spacings (Gutters, gaps)
  • Set up
  • Horizontal spacings (x-axis)
  • Vertical spacings (y-axis)
  • Horizontal & vertical spacings

Was this helpful?

  1. Contents
  2. Shopping experiences

Block inner spacings

Spacings between blocks (columns and grids) can be set using simple classes.

Last updated 1 year ago

Was this helpful?

Spacings (Gutters, gaps)

are the paddings between blocks used to place and align elements in the shopping experience.

The Grid gap (1) field can be used to define an inner distance (2, 3) between the individual blocks in a layout or column grid.

You will only find this setting for Zenit column and layout elements.

Advanced spacings (Gutters, gaps)

These spacings settings in the layout usually apply to all end devices. There are special classes to set these distances responsively - i.e. for different devices from smartphones to desktop devices. To do this, use breakpoint-specific classes to change horizontal spacing, vertical spacing, or all spacing.

To do this, the Inner Grid gap field should not contain a value.

A complete list of all classes can be found below. You can also derive them according to the following scheme: .zen-cms-g{Achse}-{Viewport}-{Größe}

Example: zen-cms-gx-sm-1 = horizontal distance from small devices in size 1

Set up

Choose a Block (3) which should receive the CSS class for the spacing and enter one or more CSS class names in the CSS classes (4) field.

The class names are entered without dot notation. Multiple CSS class names are entered separated by spaces.

Horizontal spacings (x-axis)

.zen-cms-gx-* classes can be used to set horizontal spacings.

CSS class
horizontal spacing

.zen-cms-gx-0

0

.zen-cms-gx-1

XS

.zen-cms-gx-2

SM

.zen-cms-gx-3

MD

.zen-cms-gx-4

LG

.zen-cms-gx-5

XL

SM Viewports (from 576px)

CSS class
horizontal spacing

.zen-cms-gx-sm-0

0

.zen-cms-gx-sm-1

XS

.zen-cms-gx-sm-2

SM

.zen-cms-gx-sm-3

MD

.zen-cms-gx-sm-4

LG

.zen-cms-gx-sm-5

XL

MD Viewports (from 768px)

CSS class
horizontal spacing

.zen-cms-gx-md-0

0

.zen-cms-gx-md-1

XS

.zen-cms-gx-md-2

SM

.zen-cms-gx-md-3

MD

.zen-cms-gx-md-4

LG

.zen-cms-gx-md-5

XL

LG Viewports (from 992px)

CSS class
horizontal spacing

.zen-cms-gx-lg-0

0

.zen-cms-gx-lg-1

XS

.zen-cms-gx-lg-2

SM

.zen-cms-gx-lg-3

MD

.zen-cms-gx-lg-4

LG

.zen-cms-gx-lg-5

XL

XL Viewports (from 1200px)

CSS class
horizontal spacing

.zen-cms-gx-xl-0

0

.zen-cms-gx-xl-1

XS

.zen-cms-gx-xl-2

SM

.zen-cms-gx-xl-3

MD

.zen-cms-gx-xl-4

LG

.zen-cms-gx-xl-5

XL

Example:

Vertical spacings (y-axis)

.zen-cms-gy-* classes can be used to set vertical spacings.

CSS class
vertcial spacing

.zen-cms-gy-0

0

.zen-cms-gy-1

XS

.zen-cms-gy-2

SM

.zen-cms-gy-3

MD

.zen-cms-gy-4

LG

.zen-cms-gy-5

XL

SM Viewports (from 576px)

CSS class
vertcial spacing

.zen-cms-gy-sm-0

0

.zen-cms-gy-sm-1

XS

.zen-cms-gy-sm-2

SM

.zen-cms-gy-sm-3

MD

.zen-cms-gy-sm-4

LG

.zen-cms-gy-sm-5

XL

MD Viewports (from 768px)

CSS class
vertcial spacing

.zen-cms-gy-md-0

0

.zen-cms-gy-md-1

XS

.zen-cms-gy-md-2

SM

.zen-cms-gy-md-3

MD

.zen-cms-gy-md-4

LG

.zen-cms-gy-md-5

XL

LG Viewports (from 992px)

CSS class
vertcial spacing

.zen-cms-gy-lg-0

0

.zen-cms-gy-lg-1

XS

.zen-cms-gy-lg-2

SM

.zen-cms-gy-lg-3

MD

.zen-cms-gy-lg-4

LG

.zen-cms-gy-lg-5

XL

XL Viewports (from 1200px)

CSS class
vertcial spacing

.zen-cms-gy-xl-0

0

.zen-cms-gy-xl-1

XS

.zen-cms-gy-xl-2

SM

.zen-cms-gy-xl-3

MD

.zen-cms-gy-xl-4

LG

.zen-cms-gy-xl-5

XL

Example:

Horizontal & vertical spacings

.zen-cms-g-* classes can be used to set horizontal and vertical spacings simultaneously.

CSS class
Spacing

.zen-cms-g-0

0

.zen-cms-g-1

XS

.zen-cms-g-2

SM

.zen-cms-g-3

MD

.zen-cms-g-4

LG

.zen-cms-g-5

XL

SM Viewports (from 576px)

CSS class
Spacing

.zen-cms-g-sm-0

0

.zen-cms-g-sm-1

XS

.zen-cms-g-sm-2

SM

.zen-cms-g-sm-3

MD

.zen-cms-g-sm-4

LG

.zen-cms-g-sm-5

XL

MD Viewports (from 768px)

CSS class
Spacing

.zen-cms-g-md-0

0

.zen-cms-g-md-1

XS

.zen-cms-g-md-2

SM

.zen-cms-g-md-3

MD

.zen-cms-g-md-4

LG

.zen-cms-g-md-5

XL

LG Viewports (from 992px)

CSS class
Spacing

.zen-cms-g-lg-0

0

.zen-cms-g-lg-1

XS

.zen-cms-g-lg-2

SM

.zen-cms-g-lg-3

MD

.zen-cms-g-lg-4

LG

.zen-cms-g-lg-5

XL

XL Viewports (from 1200px)

CSS class
Spacing

.zen-cms-g-xl-0

0

.zen-cms-g-xl-1

XS

.zen-cms-g-xl-2

SM

.zen-cms-g-xl-3

MD

.zen-cms-g-xl-4

LG

.zen-cms-g-xl-5

XL

Example:

are the paddings between blocks used to place and align elements in the shopping experience.

📂
Gutters
Gutters