> For the complete documentation index, see [llms.txt](https://docs.kaliumtheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kaliumtheme.com/general/footer/styling.md).

# Styling

Row width, spacing and the look of the footer.

### Full Width Row

Adjusting the width of a footer row is straightforward.

Simply click the three dots on the row you want to modify, go to the **Container** section, and toggle the **Full Width** option:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-cda8604153f09efdcb5bee6628dcec576bb70ed3%2FFooter%20Row%20Full%20Width.jpg?alt=media" alt=""><figcaption></figcaption></figure>

### Changing Row Style

You can apply styles like background, and custom link and text colors directly to the **Row** element.

To apply your style for the row, click the *vertical three dots* on the **Row** element, then go to the **Style** tab. Here, you can set colors for *text*, *headings* and *links*, and choose a *background* for the row, including the option to add an image.:

<div><figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-aa30ac1ae71cbbbc788f6f26072b0bfeca00ae02%2FFooter%20Row%20-%20Background.jpg?alt=media" alt="" width="271"><figcaption><p>Row Background</p></figcaption></figure> <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-81c53470679e59b37497ef78491fbdeba3458681%2FFooter%20Row%20-%20Colors.jpg?alt=media" alt="" width="272"><figcaption><p>Row Elements Colors</p></figcaption></figure></div>

This will result in the row appearing as shown in the example below:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-bea9ce1dd50b3e91863e2992d42eed181e41236f%2FFooter%20Row%20-%20Style%20Preview.jpg?alt=media" alt=""><figcaption></figcaption></figure>

### Columns

When you want to balance columns or set custom widths, you can adjust these settings for each column individually.​

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-a040152b116714add28a3c779e419f133ae3350a%2FFooter%20Columns%20-%20Two%20Cols.jpg?alt=media" alt=""><figcaption><p>Two columns of the same width</p></figcaption></figure>

Now, we will set the width for **Column 1** to span 3 columns out of the 12-column grid by clicking the vertical three dots button, then in **Content** section setting the **Width** value:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-08c36b625a43160c97ae1300352a55eff76eed90%2FFooter%20Columns%20-%20Column%20Width.jpg?alt=media" alt="" width="281"><figcaption></figcaption></figure>

For the other column, set the width to **Auto**, which will fill the remaining space. Additionally, for responsive viewports, you can adjust these rows to display one column per row or according to your preference. The result will be:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-86f0b757a222ab9549bdefaf2143074a3b2cfea7%2FFooter%20Columns%20-%20Two%20Cols%20Balanced.jpg?alt=media" alt=""><figcaption><p>Balanced columns</p></figcaption></figure>

### Spacings

You can adjust the spacing of elements for each row, as the **Row** provides settings for both *vertical* and *horizontal* spacing.

Click the vertical three dots on **Row** element and go to **Content** section, scroll to *Horizontal* and *Vertical* Gap:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-e855cf4605510e15dbd1d105ff8fb141d0d95fab%2FFooter%20Columns%20-%20Spacing.jpg?alt=media" alt=""><figcaption><p>Adjusting the elements spacing in a row</p></figcaption></figure>
