# Pricing Table **URL:** https://community.elfsight.com/c/css-codes/pricing-table/169.md [Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md) --- ## [Align buttons at the bottom](https://community.elfsight.com/t/align-buttons-at-the-bottom/176685)
**Author:** [@Expenses](https://community.elfsight.com/u/Expenses)\ **Replies:** 1\ **Last updated:** [October 13, 2026, 12:36pm UTC](https://community.elfsight.com/t/align-buttons-at-the-bottom/176685 "2026-10-13T12:36:54Z")
/\* Align buttons across all property cards \*/ .es-column-carousel-container { display: flex !important; flex-direction: column !important; } .es-column-carousel-container \> .es-title-container { min-height: 180px… --- ## [Change background color for a certain line](https://community.elfsight.com/t/change-background-color-for-a-certain-line/91322)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 4\ **Last updated:** [March 3, 2026, 6:54pm UTC](https://community.elfsight.com/t/change-background-color-for-a-certain-line/91322 "2026-03-03T18:54:32Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .eapps-pricing-table-column-2 .eapps-pricing-table-column-features-item:nth-child(2) { background: black; } Do not fo… --- ## [Change background color and text color of toggle caption](https://community.elfsight.com/t/change-background-color-and-text-color-of-toggle-caption/91319)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 25, 2024, 11:46am UTC](https://community.elfsight.com/t/change-background-color-and-text-color-of-toggle-caption/91319 "2024-12-25T11:46:03Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .es-toggles-caption { background: red!important; color: white; } --- ## [Change hint background color](https://community.elfsight.com/t/change-hint-background-color/91250)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 4\ **Last updated:** [January 19, 2026, 1:09pm UTC](https://community.elfsight.com/t/change-hint-background-color/91250 "2026-01-19T13:09:59Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .global-styles, .es-tooltip-container { background: #d8d8d9 !important; } --- ## [Vertical display for the Classic Table on mobile](https://community.elfsight.com/t/vertical-display-for-the-classic-table-on-mobile/140219)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 4\ **Last updated:** [January 15, 2026, 12:33pm UTC](https://community.elfsight.com/t/vertical-display-for-the-classic-table-on-mobile/140219 "2026-01-15T12:33:12Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: @media (max-width: 768px) { .es-layout-classic-table-snap-carousel { display: flex !important; flex-directio… --- ## [Change link color in hint](https://community.elfsight.com/t/change-link-color-in-hint/140221)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 6:37pm UTC](https://community.elfsight.com/t/change-link-color-in-hint/140221 "2025-10-01T18:37:24Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .global-styles, .es-features-feature-hint-inner a { color: #1494ff!important; } --- ## [Change hint text color](https://community.elfsight.com/t/change-hint-text-color/140220)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 6:34pm UTC](https://community.elfsight.com/t/change-hint-text-color/140220 "2025-10-01T18:34:52Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .global-styles, .es-features-feature-hint-inner { color: red !important; } --- ## [Make title of each column different color](https://community.elfsight.com/t/make-title-of-each-column-different-color/78096)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 3\ **Last updated:** [September 3, 2025, 10:51am UTC](https://community.elfsight.com/t/make-title-of-each-column-different-color/78096 "2025-09-03T10:51:54Z")
Add the code for your layout to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: Grid: .es-column-container:nth-child(1) .es-title { color: tomato; } Carousel: .es-layout-carou… --- ## [Change color of all feature icons](https://community.elfsight.com/t/change-color-of-all-feature-icons/23403)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 2\ **Last updated:** [April 13, 2024, 6:09am UTC](https://community.elfsight.com/t/change-color-of-all-feature-icons/23403 "2024-04-13T06:09:29Z")
Add the code for the need icon to Custom CSS field on your Pricing Table widget’s Appearance tab: 1. Bulb .es-features-feature-icon-bulb { fill: orange !important; } 2. Check Mark in the Circle .es-features-featu… --- ## [Change width of the Head Column](https://community.elfsight.com/t/change-width-of-the-head-column/78112)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 24, 2024, 2:06pm UTC](https://community.elfsight.com/t/change-width-of-the-head-column/78112 "2024-10-24T14:06:08Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .es-widget-container { --head-column-width: 180px; } .es-layout-comparison-table-outer-table-container, .es-layout… --- ## [Set the number of tables per row (Grid layout)](https://community.elfsight.com/t/set-the-number-of-tables-per-row-grid-layout/110390)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 4\ **Last updated:** [April 10, 2025, 6:50pm UTC](https://community.elfsight.com/t/set-the-number-of-tables-per-row-grid-layout/110390 "2025-04-10T18:50:15Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .es-layout-grid-container { grid-template-columns: repeat(3, 1fr); column-gap: 20px; } .es-column-grid-container … --- ## [Add ribbon style for Price (Grid)](https://community.elfsight.com/t/add-ribbon-style-for-price-grid/105883)
**Author:** [@Sina](https://community.elfsight.com/u/Sina)\ **Replies:** 3\ **Last updated:** [March 14, 2025, 10:18pm UTC](https://community.elfsight.com/t/add-ribbon-style-for-price-grid/105883 "2025-03-14T22:18:55Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .es-column-container { overflow: visible; } .es-price-container { --d: 0.3em; /\* the depth \*/ font-size: 26px; … --- ## [Change color of hint (question) icon on hover](https://community.elfsight.com/t/change-color-of-hint-question-icon-on-hover/91251)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 24, 2024, 6:19pm UTC](https://community.elfsight.com/t/change-color-of-hint-question-icon-on-hover/91251 "2024-12-24T18:19:34Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .es-features-feature-hint:hover { color: blue; } --- ## [Change hint font color](https://community.elfsight.com/t/change-hint-font-color/91249)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 24, 2024, 6:17pm UTC](https://community.elfsight.com/t/change-hint-font-color/91249 "2024-12-24T18:17:14Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .global-styles, .es-features-feature-hint-inner { color: violet; } --- ## [Change spacing between columns (Grid and Carousel)](https://community.elfsight.com/t/change-spacing-between-columns-grid-and-carousel/91318)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 25, 2024, 11:39am UTC](https://community.elfsight.com/t/change-spacing-between-columns-grid-and-carousel/91318 "2024-12-25T11:39:49Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: Grid: .es-layout-component { gap: 50px 30px; } 1st value - spacing between lines 2nd value - spacing between colu… --- ## [Zoom effect on image hover](https://community.elfsight.com/t/zoom-effect-on-image-hover/78090)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 24, 2024, 1:24pm UTC](https://community.elfsight.com/t/zoom-effect-on-image-hover/78090 "2024-10-24T13:24:07Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .es-picture-container img { transition: 0.5s; } .es-picture-container img:hover { transform: scale(1.3); } --- ## [Change border color of the table](https://community.elfsight.com/t/change-border-color-of-the-table/78095)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 24, 2024, 1:36pm UTC](https://community.elfsight.com/t/change-border-color-of-the-table/78095 "2024-10-24T13:36:04Z")
Add the code for your layout to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: Grid/Carousel: .es-column-container { border: 1px solid #ff6b00; } Classic Table: .es-layout-cla… --- ## [Make rounded borders for a certain column (Table layouts)](https://community.elfsight.com/t/make-rounded-borders-for-a-certain-column-table-layouts/78105)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 24, 2024, 1:52pm UTC](https://community.elfsight.com/t/make-rounded-borders-for-a-certain-column-table-layouts/78105 "2024-10-24T13:52:42Z")
Add the code for your layout to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: Classic Table: .es-layout-classic-table-container:not(:has(.es-snap-carousel-wrapper)) .es-column-cont… --- ## [Change height of lines with features and center feature icon](https://community.elfsight.com/t/change-height-of-lines-with-features-and-center-feature-icon/78117)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 24, 2024, 2:22pm UTC](https://community.elfsight.com/t/change-height-of-lines-with-features-and-center-feature-icon/78117 "2024-10-24T14:22:48Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .es-features-feature-text { line-height: 2; } .es-features-feature-icon { align-self: center; } --- ## [Control spacing between letters](https://community.elfsight.com/t/control-spacing-between-letters/91259)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 24, 2024, 6:34pm UTC](https://community.elfsight.com/t/control-spacing-between-letters/91259 "2024-12-24T18:34:07Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: \* { letter-spacing: 0.03em; } --- ## [Move ribbon to the left](https://community.elfsight.com/t/move-ribbon-to-the-left/91258)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [March 14, 2025, 6:47pm UTC](https://community.elfsight.com/t/move-ribbon-to-the-left/91258 "2025-03-14T18:47:57Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .es-ribbon { left: -30px; transform: rotate(-45deg) } --- ## [Remove borders between lines for a specific column](https://community.elfsight.com/t/remove-borders-between-lines-for-a-specific-column/91255)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 24, 2024, 6:27pm UTC](https://community.elfsight.com/t/remove-borders-between-lines-for-a-specific-column/91255 "2024-12-24T18:27:13Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: Grid: .es-column-container:nth-child(2) .es-features-feature::before, .es-column-container:nth-child(2) .es-features-… --- ## [Gray out certain column](https://community.elfsight.com/t/gray-out-certain-column/91253)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 24, 2024, 6:21pm UTC](https://community.elfsight.com/t/gray-out-certain-column/91253 "2024-12-24T18:21:15Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: Grid: .es-column-container:nth-child(1) { opacity: 0.5; } Carousel: .es-layout-carousel-grid .es-column-contain… --- ## [Make toggles larger](https://community.elfsight.com/t/make-toggles-larger/91246)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 24, 2024, 6:12pm UTC](https://community.elfsight.com/t/make-toggles-larger/91246 "2024-12-24T18:12:02Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .es-toggles-wrapper { transform: scale(1.4); margin-right: 50px; } --- ## [Change font for all elements (Pricing Table)](https://community.elfsight.com/t/change-font-for-all-elements-pricing-table/23395)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 0\ **Last updated:** [October 24, 2023, 10:15am UTC](https://community.elfsight.com/t/change-font-for-all-elements-pricing-table/23395 "2023-10-24T10:15:48Z")
Add the code below to Custom CSS field on your Pricing Table widget’s Appearance tab: \* { font-family: Calibri; } You may also set any other font, providing it is supported by your browser and added to your website. --- ## [Add padding to the top part of the columns](https://community.elfsight.com/t/add-padding-to-the-top-part-of-the-columns/34219)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 13, 2023, 2:03pm UTC](https://community.elfsight.com/t/add-padding-to-the-top-part-of-the-columns/34219 "2023-12-13T14:03:40Z")
Add the code for your layout to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: Grid/Carousel: .es-column-container { padding-top: 20px; } Classic Table: .es-layout-classic-table… --- ## [Change font color for the specific row](https://community.elfsight.com/t/change-font-color-for-the-specific-row/40304)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [February 9, 2024, 11:50am UTC](https://community.elfsight.com/t/change-font-color-for-the-specific-row/40304 "2024-02-09T11:50:08Z")
Add this code to the Custom CSS field on the Style tab of your Pricing Table widget’s settings: .es-features-feature:nth-child(3) .es-features-feature-text { color: blueviolet; } --- ## [Move table toggles under the tables](https://community.elfsight.com/t/move-table-toggles-under-the-tables/91240)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 24, 2024, 5:55pm UTC](https://community.elfsight.com/t/move-table-toggles-under-the-tables/91240 "2024-12-24T17:55:17Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: \[class\*="widget\_\_Container-sc"\] { display: flex; flex-direction: column-reverse; } \[class\*="es-toggles-container"\] { … --- ## [Change font size and weight in toggles](https://community.elfsight.com/t/change-font-size-and-weight-in-toggles/78089)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 24, 2024, 1:23pm UTC](https://community.elfsight.com/t/change-font-size-and-weight-in-toggles/78089 "2024-10-24T13:23:00Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .es-toggles-toggle { font-weight:bold!important; font-size: 24px!important; } --- ## [Change font size in the ribbon](https://community.elfsight.com/t/change-font-size-in-the-ribbon/106249)
**Author:** [@Sina](https://community.elfsight.com/u/Sina)\ **Replies:** 0\ **Last updated:** [March 11, 2025, 6:16am UTC](https://community.elfsight.com/t/change-font-size-in-the-ribbon/106249 "2025-03-11T06:16:32Z")
Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings: .es-ribbon { font-size:15px; } [Next page](https://community.elfsight.com/c/css-codes/pricing-table/169.md?page=1)