Pricing table: all CSS customisation options

Ask the Community Customization
23

Hi there @Pradeep_Dodle :wave:

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

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

@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:
/* 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:
/* 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 :slightly_smiling_face: