Pricing table: all CSS customisation options

[Pradeep_Dodle]

• Issue description:

Is there a page where I can find the list of all customisable CSS elements in the pricing table widget?

• Link to the page with the widget in question:

[Max]

Welcome to the Community @Pradeep_Dodle

Glad to tell you that we have a list with the most popular codes for Pricing Table. Feel free to check it out - Pricing Table - Elfsight Community

However, if you haven’t found the needed code in our CSS Codes category, please describe your use case in more detail. We’ll be happy to check if anything can be done

[Pradeep_Dodle]

@Max Thanks for sharing the link. I couldn’t find the code I’m looking for though.

1. I’m using table layout for my pricing table. Is there a way to adjust the width of the Head Column (the 0th column) ? In mobile view it is very narrow. Is there a way to edit the font size as well?

2. Is there a way to edit a particular row of the pricing table? I would like to customise background colours, font colors & font sizes of some rows.

Thanks,
Pradeep

[Max]

Sure!

1. Do I understand correctly that you need to adjust width and the font size of the Head Column only for mobile?

2. You can use this code to change the background color and the font size of the specific row:

.eapps-pricing-table-column-2
.eapps-pricing-table-column-features-item:nth-child(10) {
background: red;
font-size: 20px;
}

Please check it out and let me know if it helped

As for changing the font color for the specific row, I’ve forwarded your request to our devs. I’ll let you know once the solution is provided.

[Pradeep_Dodle]

1. Do I understand correctly that you need to adjust width and the font size of the Head Column only for mobile?

Yes, if it is possible. Thank you.

Thanks for the code to change the background color and font size of specific row. It worked for me

[Max]

Great! I’ve shared this info as well.

I’ll keep you in the loop

[Pradeep_Dodle]

Hi Max,

Thanks for the help so far. While we wait for your devs to get back on the two customisations, can you help me with this?

My widget is here: https://www.superfone.in/copy-of-plans-pricing

(I’m more interested in the mobile view of this page. The attached screenshot is on an Android chrome browser)

I’m unable to reduce the height of the title text container and the corresponding cell on the left in the head column. This area is highlighted in Red and marked A.

How can I delete the extra space highlighted in Blue and marked B?

Thanks,
Pradeep

[Max]

@Pradeep_Dodle Sure! I’ve shared your ideas with our devs.

I’ll keep you in the loop

[Max]

Our devs have shared the codes for your use case:

1. Change the font color for the specific row:

.eapps-pricing-table-column-features-item:nth-child(3)
.eapps-pricing-table-column-features-item-text{
  color: blueviolet;
}

2. Change width of the Head Column on mobile:

.eapps-pricing-table-column-head-mobile-inner {
  width: 300px;
}

3. Change font size in the Head Column on mobile:

.eapps-pricing-table-column-head-mobile-inner
.eapps-pricing-table-column-features-item-text {
  font-size: 20px;
}

4. Change height of the container A and reduce spacing B on mobile:

@media(max-width: 500px) {
  .eapps-pricing-table-column-head-mobile-inner +
  .eapps-pricing-table-column-inner 
  .eapps-pricing-table-column-title-container,
  .eapps-pricing-table-column-head-mobile-inner
  .eapps-pricing-table-column-title-container {
    height: 100px !important;
    padding: 0 10px !important;
    
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  
  .eapps-pricing-table-column-head-mobile-inner +
  .eapps-pricing-table-column-inner
  .eapps-pricing-table-column-features-container,
  .eapps-pricing-table-column-head-mobile-inner
  .eapps-pricing-table-column-features-container {
    padding-top: 0 !important;
  }
}

Please check these codes and let me know if they worked for you

[Pradeep_Dodle]

This is priceless!
@Max - everything worked like magic! Thanks for the great support.

[Max]

Wow, thanks a million for your fantastic feedback

If you have any further questions or any assistance is needed, we are always here for you

[Pradeep_Dodle]

Hi @Max

Is there a way to show table layout in the desktop view and hide the Head Column in the mobile view?

[Max]

Hi @Pradeep_Dodle

Sure, here is the code you can use:

.eapps-pricing-table-column-head-mobile-inner {
  display: none;
}

.eapps-pricing-table-column {
  overflow: hidden;
}

Check it out and let me know how it worked

[Pradeep_Dodle]

Hi @Max ,

Thanks for the great help. That was one of the reasons why I upgraded to a paid plan.

I need a small help.

My pricing widget is here: www.superfone.in/pricing
When viewed on the mobile browser, there is excess blank space in some cells, mainly as they have less text compared to the same cell in a different column. How do I get rid of this?

See the red boxes in the attached pictures for better understanding.

[Max]

Hi @Pradeep_Dodle

Sure, I’ll gladly check it with our devs and let you know if it’s feasible

[Max]

We’ve added this option to the Custom CSS field on the Appearance tab of your widget’s settings:

.global-styles,
.eapps-pricing-table-one-column
.eapps-pricing-table-column-features-item {
  height: auto !important;
}

Check it out and let me know if it worked

[Pradeep_Dodle]

Hi @Max,
I have 3 questions:

1. How do I center align a particular row in the pricing table?
2. In mobile view, is there a way to stack toggle buttons next to each other vs. one over another?
3. Can the space between toggle and the top of the pricing table be reduced?

For (2) and (3) see the attached image

[Pradeep_Dodle]

One more thing. Is it possible to change the background and text colors of the toggle buttons independently?

[Max]

Hi @Pradeep_Dodle

Sure! I’ve passed your request on to our dev team and will get back to you a bit later

[Pradeep_Dodle]

@Max any update for me?