# Pricing table: all CSS customisation options

**URL:** <https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789>\
**Category:** Customization\
**Tags:** pricing-table\
**Created:** [February 5, 2024, 2:08pm UTC](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789 "2024-02-05T14:08:55Z")\
**Posts on this page:** 11\
**Page:** 2

<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:** [May 9, 2024, 6:12pm UTC](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789/22 "2024-05-09T18:12:40Z")

</div>

Hi there @Pradeep_Dodle 👋

Unfortunately, I haven’t got any news yet. I’ve requested an update and will let you know once anything comes up 🙂

---

<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:** [May 13, 2024, 1:30pm UTC](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789/23 "2024-05-13T13:30:40Z")

</div>

Hi there @Pradeep_Dodle 👋

Thank you for waiting!

1. **Alignment for the particular row** - unfortunately, there is no way to customize the widget this way. I am really sorry! I’ve added your idea to the Wishlist, so you can keep an eye on it right here - [Center align particular row](https://community.elfsight.com/t/center-align-particular-row/52046)

2. **Stack toggle buttons next to each other on mobile:**

```auto
@media (max-width: 480px) {
	.eapps-pricing-table-toggle-inner {
		flex-wrap: nowrap !important;
		padding: 0 !important;
	}
	.eapps-pricing-table-toggle-item-hint {
		display: block !important;
	}
}

```

1. **Code to change spacing between toggles and toggles and table** :

```auto
/* between toggles */
.eapps-pricing-table-toggle-inner {
	gap: 0px;
}

/* between toggles and table*/
.eapps-pricing-table-toggle-container {
	margin-bottom: 35px !important;
}

```

1. **Change background and text color of toggles independently:**

```auto
/* Toggle 1 */
.eapps-pricing-table-toggle-item-1 .eapps-pricing-table-toggle-item-name {
  color: rgb(30, 249, 110);
  background-color: rgba(30, 249, 110, 0.05);
}

/* Toggle 1 Active */
.eapps-pricing-table-toggle-item-1.eapps-pricing-table-toggle-item-active
  .eapps-pricing-table-toggle-item-name {
  color: rgb(30, 249, 110);
  background-color: rgba(30, 249, 110, 0.1);
}

/* Toggle 2 */
.eapps-pricing-table-toggle-item-2 .eapps-pricing-table-toggle-item-name {
  color: rgb(207, 24, 248);
  background-color: rgba(207, 24, 248, 0.05);
}

/* Toggle 2 Active */
.eapps-pricing-table-toggle-item-2.eapps-pricing-table-toggle-item-active
  .eapps-pricing-table-toggle-item-name {
  color: rgb(207, 24, 248);
  background-color: rgba(207, 24, 248, 0.1);
}

```

Check it out and let me know if it helped 🙂

---

<div class="post-metadata">

**Author:** ![Pradeep\_Dodle](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/pradeep_dodle/32/7280_2.png) [@Pradeep\_Dodle](https://community.elfsight.com/u/Pradeep_Dodle)\
**Post date:** [July 19, 2024, 1:00pm UTC](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789/24 "2024-07-19T13:00:40Z")

</div>

Hi @Max ,

Is there an option to change the height of the pricing row? To be exact, I want to remove the padding (see image) on the website and on our mobile site.

 ![elfsight 7](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/d/cd661a66df32568d7cde674991a5e40540bd9413.png)

---

<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:** [July 19, 2024, 1:45pm UTC](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789/25 "2024-07-19T13:45:21Z")

</div>

Hi @Pradeep_Dodle 👋

Could you please send me a link to the page where your widget is installed?

---

<div class="post-metadata">

**Author:** ![Pradeep\_Dodle](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/pradeep_dodle/32/7280_2.png) [@Pradeep\_Dodle](https://community.elfsight.com/u/Pradeep_Dodle)\
**Post date:** [July 19, 2024, 3:24pm UTC](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789/26 "2024-07-19T15:24:11Z")

</div>

www.superfone.in/pricing

---

<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:** [July 19, 2024, 3:56pm UTC](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789/27 "2024-07-19T15:56:26Z")

</div>

Thanks!

I’ve passed it to the devs. Currently, they are out of the office, so I’ll get back to you on Monday 🙂

---

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [July 20, 2024, 2:45am UTC](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789/28 "2024-07-20T02:45:09Z")

</div>

I think you can use this CSS code

```auto
div.eapps-pricing-table-column-features-container.eapps-pricing-table-column-item {
    padding-top: 0px !important;
}
.eapps-pricing-table-column-features-container.eapps-pricing-table-column-item>div>div:first-child {
    display: none !important; 
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/a/da316a334fb299b4a5fb8879b9ec9d1bfa455572.png)

---

<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:** [July 22, 2024, 10:07am UTC](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789/29 "2024-07-22T10:07:46Z")

</div>

Hi @Pradeep_Dodle 👋

The solution by @tuanphan is great, and I see that you’ve already added it to the widget.

If anything else comes up, feel free to let us know. We’ll be happy to help 😉

---

<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:** [November 15, 2024, 10:55am UTC](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789/30 "2024-11-15T10:55:00Z")

</div>

A post was merged into an existing topic: [Custom Icons](https://community.elfsight.com/t/custom-icons/5161/3)

---

<div class="post-metadata">

**Author:** ![Pradeep\_Dodle](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/pradeep_dodle/32/7280_2.png) [@Pradeep\_Dodle](https://community.elfsight.com/u/Pradeep_Dodle)\
**Post date:** [November 15, 2024, 11:02am UTC](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789/31 "2024-11-15T11:02:57Z")

</div>

@Max Is there a way to change the alignment of the text (left / mid / right) of a particular column in the pricing table?

---

<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:** [November 15, 2024, 12:31pm UTC](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789/32 "2024-11-15T12:31:06Z")

</div>

This code should help:

```auto
.eapps-pricing-table-columns-container-N .eapps-pricing-table-column-M * {
  text-align: center !important;
}

```

  

Replace **N** with the number of the table and **M** with the number of column, where you’d like to change the alignment 🙂

[Previous page](https://community.elfsight.com/t/pricing-table-all-css-customisation-options/39789.md?page=1)