Spacing

Expand the 'Site' tab to adjust the spacing for your website's:

• Site Width - Switch the 'Fixed Width' toggle to 'Yes' to set a defined width container for your website's display. Select the arrows to increase or decrease the pixel size.
• Site Padding - Select the arrows to increase or decrease the pixel size for the padding applied from the viewpoint edge on both small and large screens.
• Site Box Shadow - You can define the box shadow used for your website container with horizontal, vertical, blur and opacity options. Select the arrows to increase or decrease the pixel size and opacity percentage.
• Notification Padding - You can define the padding for your notifications from below and to the side of the screen edge. Select the arrows to increase or decrease the pixel size.
• Back to Top - You can define the size and padding of your 'Back to top' button from below and to the side of the screen edge. Select the arrows to increase or decrease the pixel size.

Expand the 'Header' tab to adjust the spacing for your website's:

• Header Width - Switch the 'Fixed Width' toggle to 'Yes' to set a defined width container for your header container. Select the arrows to increase or decrease the pixel size.
• Header Height and Breakpoint - You can define the height of your header on small and large screens and determine the breakpoint of when the change occurs. Select the arrows to increase or decrease the pixel size.
• Main Navigation - You can define the width of the dropdowns in your main navigation, pick how many child items are displayed before a multi-column layout is used, and the single- and multi-columns' width size. Select the arrows to increase or decrease the item number and pixel size.
• Box Shadow - You can define the box shadow spacing of your site header, with horizontal, vertical, blur and opacity options. Select the arrows to increase or decrease the pixel size and opacity percentage.

Expand the 'Logo' tab to adjust the spacing for your website's logo padding. You can define the padding around the website's logo for both the small header height and large header height. Select the arrows to increase or decrease the pixel size in the 'Top', 'Right', 'Bottom' and 'Left' options.

Expand the 'General' tab to adjust the spacing for your:

• Item Padding - Define the padding used on both small and large individual items throughout your website. Select the arrows to increase or decrease the pixel size.
• Borders - Define the width and radius of borders throughout your website. Select the arrows to increase or decrease the pixel size.
• Box Shadow - Define the settings for your box shadow spacing, including horizontal, vertical, blur and opacity options. Select the arrows to increase or decrease the pixel size and opacity percentage.

Expand the 'Components' tab to adjust the spacing for your:

• Component Padding - Define the spacing at the bottom of a component when the 'Full' page layout option is not selected, as well as the spacing at the top and bottom of a component when the 'Full' page layout is selected. You can define padding pixel size for desktop, tablet, mobile (held horizontally) and mobile (held vertically) for this option. Select the arrows to increase or decrease pixel size.
• Intro Width - Define the width of the 'Intro' column on components when the 'Full' page layout option is selected. You can define width percentage for desktop, tablet, mobile (held horizontally) and mobile (held vertically). Select the arrows to increase or decrease width percentage.
• Outro Width - Define the width of the 'Outro' column on components when the 'Full' page layout option is selected. You can define width percentage for desktop, tablet, mobile (held horizontally) and mobile (held vertically). Select the arrows to increase or decrease width percentage.
• Centred Column Width - You can define the width of a component's content when you have chosen the option 'Centre' and when the 'Full' page layout option is selected. You can define width percentage for desktop, tablet, mobile (held horizontally) and mobile (held vertically). Select the arrows to increase or decrease width percentage.
• Banners - You can define the width of a content column found in banners. You can define width percentage for desktop, tablet, mobile (held horizontally) and mobile (held vertically). Select the arrows to increase or decrease width percentage.

Expand the 'Buttons' tab to adjust the spacing for your:

• Borders - Define the width and radius of your button borders. Select the arrows to increase or decrease their pixel size.
• Box Shadow - Define the spacing for your buttons' box shadows, including horizontal, vertical, blur and opacity options. Select the arrows to increase or decrease the pixel size and opacity percentage.
• Padding - Define the padding of your small, medium and large buttons, with 'Top', 'Right', 'Bottom' and 'Left' options available for all three sizes. Select the arrows to increase or decrease the pixel size.

Expand the 'Modal windows' tab to adjust the spacing for your:

• Components - Define the maximum width of components inside modal windows. Select the arrows to increase or decrease pixel size.
• Pods - Define the maximum width of pods inside modal windows. Select the arrows to increase or decrease pixel size.
• Backdrop - Define the backdrop opacity inside modal windows. Select the arrows to increase or decrease opacity percentage.