Again Pricing Table Continued

Support
#1

Hi There,

I would like to make a pricing table with below desired result:

But sofar this is what I get using a fixed column height:

Questions:

  1. How can I increase the width of the first colum and reduce the size of teh second and third in CSS
  2. How can I make sure the columns are aligning proper I’m now using a combination of font-size=0.9em; and max-height: 50px?
  3. Second how can vertically align the text when using a fixed height.

ps. I love the option to use local css, so when this works I can reuse this as a template for other situations

#2

Hello Rick,

Thanks for asking. :slight_smile:

Please add following CSS under Pro > Theme Options > CSS:

.x-pricing-column:first-child {
    width: 50% !important;
}

.x-pricing-table.three-columns .x-pricing-column {
    width: 25%;
}
  1. Can you please share page URL for us to take a closer look?
  2. You can use Flexbox property to vertically align the texts. Here’s a tutorial that you can take a look to get started. https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Thanks.

#3

Hi there,

for the following I tried:

  1. The CSS seems to work, so that means playing around with Fixed height, Font-size and with percentages to it aligns in a proper way and stays readable.

  2. (see point 1) https://www.easystep2.nl/microsoft365-of-office365/

  3. In combination with point 1 this becomes quite cumbersum.

My current css is:

/* General Pricing Table settings */
.x-pricing-column:first-child {
width: 40% !important;
}

.x-pricing-table.three-columns .x-pricing-column {
width: 30%;
}

.column01 .x-pricing-column-info .x-btn {
visibility: hidden;
}

.column01, .column02, .column03, ul.x-ul-icons li {
min-height: 60px;
font-size: 0.9em;
}

/* to remove icons /
.column01 .x-pricing-column-info ul>li [class=“x-icon-”] {
display: none;
}

/* Office365 Pricing Table Column 1 */
.column01 h2 {
background-color: #ddd;
}

.column01 .x-pricing-column-info {
/* background-color: orange; */
}

.column01 ul.x-ul-icons li {
text-align: left;
margin-right: 0em;
padding-left: 0em;
}

.column01 h3, .x-pricing-column-info .x-interval {
color: white;
}

/* to change button background color */
.column01 .x-btn {
color: white;
border-color: #EC971F;
background-color: white;
visibility: hidden;
}

.column01 .x-btn:hover {
color: #F9F2FF;
border-color: #F0AD4E;
background-color: #F0AD4E;
}

/* Office365 Pricing Table Column 2 /
.column02 h2 {
/ background-color: #23a8e1 !important; */
}

/* to remove icons /
/.pricingtable-office365-col2 .x-pricing-column-info ul>li [class*=“x-icon-”] {
display: none;
} */

/* pricing background color*/
.column02 .x-pricing-column-info {
background-color: #23a8e1;
color: white;
}

.column02 .basic-class .x-interval {
color: white;
background-color: #23a8e1;
text-align: center;
letter-spacing: 2px;
font-size: 1.7em;
}

.column02 .x-pricing-column-info .x-interval {
color: white;
}

.column02 h3,.x-interval-sub {
background-color: #23a8e1;
text-align: center;
letter-spacing: 2px !important;
color: white;
}

.column02 .x-ul-icons li {
background-color: #23a8e1;
}

.column02 ul.x-ul-icons li {
color: white;
}

/* to change button background color */
.column02.x-btn {
color: #F9F2FF;
border-color: #EC971F;
background-color: #EC971F;
margin-top: 2px;
padding: 20px;
}

.column02 .x-btn:hover {
color: #F9F2FF;
border-color: #F0AD4E;
background-color: #F0AD4E;
}

/* Office365 Pricing Table Column 3 */
.column03 h2 {
background-color: #ddd;
}

/* to remove icons /
/.column03 .x-pricing-column-info ul>li [class*=“x-icon-”] {
display: none;
} */

/* pricing background color*/
.column03 .x-pricing-column-info {
/* background-color: orange; */
}

.column03 .x-pricing-column-info .x-interval {
color: grey;
}

.column03 h3, .basic-class .x-interval {
/* background-color: #ffa500; */
color: grey;
text-align: center;
letter-spacing: 2px !important;
}

.column03 ul.x-ul-icons li {
color: grey;
}

/* to change button background color */
.column03 .x-btn {
color: #F9F2FF;
border-color: #EC971F;
background-color: #EC971F;
margin-top: 2px;
padding: 20px;
}

.column03 .x-btn:hover {
color: #F9F2FF;
border-color: #F0AD4E;
background-color: #F0AD4E;
}

.column03 .x-pricing-column-info .x-btn {
visibility: hidden;
}

#4

Hi Rick,

Seems #2 and #3 are the same, so I’ll provide some idea for your existing CSS.

When vertically aligning a text without using a flex styling (using one will affect the table layout since it’s intended to be a table), you’ll use line-height. It should be equal to the height of the container, and sometimes, minus of the text height. Example, you can change this

.column01, .column02, .column03, ul.x-ul-icons li {
min-height: 60px;
font-size: 0.9em;
}

to this

.column01, .column02, .column03, ul.x-ul-icons li {
min-height: 60px;
font-size: 0.9em;

line-height: calc(60px -  0.9em);
}

That should vertically align your text within 60px height.

Thanks!

#5

Hi there, this did the trick:

specially making use of “fontsize: 1.0vw;” letting the browser scale the font. and setting the correct values so all text stays visible.

my CSS:

/* Sizing and controlling columns width and height and text sizes */
.column01, .column02, .column03, ul.x-ul-icons li {
min-height: 45px;
}
.x-pricing-column:first-child {
width: 42% !important;
}
.x-pricing-table.three-columns .x-pricing-column {
width: 27%;
}

/* Making sure no text wrapping occurs */
.column01 h2 {
font-size:1.0vw !important;
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
}
.column02 h2 {
font-size:1.0vw !important;
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
}
.column03 h2 {
font-size:1.0vw !important;
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
}

.column01 ul.x-ul-icons li {
text-align: left;
margin-right: 0em;
padding-left: 0em;
font-size:0.80vw !important;
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
}

#6

Glad this was sorted out, Rick. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.