Block's paddings are the space between the block boundary and its content in the block direction. For instance, on an ordinary monitor (e.g., with a resolution of 1920*1080 pixels), the block's content area will have a width of 1200 pixels (the wide central column where all the block's elements are located) — in this article, we'll explore how to change the inner padding from the side boundaries of this central content area to the actual content of the block.

For example, you can simultaneously increase or decrease the side paddings for all blocks on your website. You can also specify different padding widths based on various screen sizes — separately for displaying the site on computer screens, tablets, smartphones, etc.

Tip: You can change the vertical paddings in the block settings with this tutorial.

How to check the paddings' width

You can check the width of the paddings by using your browser's Devtools. This article is about changing the side paddings in the main central part of the block where all the content is placed. In the DOM tree of the site, this HTML element has the class w-section__inner and is a child element (located inside) of the HTML tag <section>, which is present in every block (except the site header). The screenshot below shows spaces in green color, the width of which can be changed with the code from this article:


Tip: You can open your browser's Devtools on Windows using F12 or Ctrl+Shift+C. On MacOS — Cmd+Option+I.
Note: In ordinary blocks in the middle of the page, the HTML <section> tag is the following: <section class="w-section">. But the footer has other classes, for example, <section class="footer w-section--footer w-section--no-v-padding">.

Changing the side paddings' width for all blocks on the site

This section contains code to change the paddings for different screen widths. You can copy this code and change the padding width values specified in each line after the colon. For example, some designers find it sometimes helpful to increase the block paddings for screen widths of 768-991 pixels. To do this, you should change the default 32px to, let's say, 40px. Then the line with the code --ui-content-gutter-768: 32px; will look like --ui-content-gutter-768: 40px;.

Code blank for changing side paddings of the block for different screen widths:

:root {
  --ui-content-gutter-320: 24px; /* for a screen width of 320-480 pixels */
  --ui-content-gutter-480: 24px; /* for a screen width of 480-767 pixels */
  --ui-content-gutter-768: 32px; /* for a screen width of 768-991 pixels */
  --ui-content-gutter-992: 40px; /* for a screen width of 992-1279 pixels */
  --ui-content-gutter-1200: 15px; /* for a screen width of 1280 pixels and more */
}

You can add this code to your site in the site settings in the Custom code section in the CSS tab. More details about adding CSS code are described in this article.

Tip: In the code between /* and */, there are comments that do not affect the code. You don't have to copy them, but they will help you understand this code later.
Tip: You can optionally leave only the CSS properties in which you changed values — all other properties (rows with values in pixels) in the code above have default values (duplicate Weblium's internal code), so it is not necessary to copy them all.
Note: The code above uses CSS variables. Each has a name ending in a number representing the smallest screen width in pixels at which this block padding width applies. However, the last line of code has a name related to the width of the site's content area (container). In this case, the container is a part of the screen, which is calculated as the screen's width minus the border, paddings, and margins of the block and is 1200 pixels for screen widths of 1280 pixels and more. Before that, for screen widths of 992-1279 pixels, internal margins occupy 80 pixels (40 on both sides of the block).

Updated on: 12/05/2023