# Change width of the Head Column

**URL:** <https://community.elfsight.com/t/change-width-of-the-head-column/78112>\
**Category:** Pricing Table\
**Created:** [October 24, 2024, 2:06pm UTC](https://community.elfsight.com/t/change-width-of-the-head-column/78112 "2024-10-24T14:06:08Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 24, 2024, 2:06pm UTC](https://community.elfsight.com/t/change-width-of-the-head-column/78112/1 "2024-10-24T14:06:08Z")

</div>

Add this code to the Custom CSS field on the Appearance tab of your [Pricing Table](https://elfsight.com/pricing-table-plugin/) widget’s settings:

```auto
.es-widget-container {
  --head-column-width: 180px;
}

.es-layout-comparison-table-outer-table-container,
.es-layout-comparison-table-container {
  grid-auto-columns: calc((100% - var(--head-column-width)) / 2);
  grid-template-columns: var(--head-column-width);
}

.es-layout-comparison-table-snap-carousel .es-head-column-container * {
  max-width: var(--head-column-width);
}

.es-snap-carousel-arrow-control-container:has(.es-snap-carousel-arrow-control-left) {
  left: calc(var(--head-column-width) - 16px) !important;
}

```