Recent updates have caused the outline property used to add border styling to the pricing module to create extra space above the content.
To fix this, find this section of CSS:
/*What I Do Section*/
.ds-services-cta {
border: 1px solid #bef6f2 !important;
outline: 5px solid #defaf8 !important;
}
.ds-services-cta.et_pb_promo:after,
.ds-services-cta.et_pb_promo:before,
.ds-pricing-table .et_pb_pricing_table:before,
.ds-pricing-table .et_pb_pricing_table:after,
.ds-faq .et_pb_toggle:before,
.ds-faq .et_pb_toggle:after {
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ds-services-cta.et_pb_promo:after,
.ds-pricing-table .et_pb_pricing_table:after,
.ds-faq .et_pb_toggle:after {
border-color: transparent;
border-bottom-color: #fff;
border-width: 5px;
margin-left: -5px;
bottom: 100%;
}
.ds-services-cta.et_pb_promo:after {
bottom: calc(100% - 1px);
}
.ds-services-cta.et_pb_promo:before,
.ds-pricing-table .et_pb_pricing_table:before,
.ds-faq .et_pb_toggle:before {
border-color: transparent;
border-bottom-color: #bef6f2;
border-width: 15px;
margin-left: -15px;
bottom: 100%;
}
@media only screen and (max-width: 980px) {
.ds-services-column {
margin-bottom: 70px;
}
}And replace it with this:
/*What I Do Section*/
.ds-services-cta {
border: 1px solid #bef6f2 !important;
outline: 5px solid #defaf8 !important;
}
.ds-services-cta.et_pb_promo:after,
.ds-services-cta.et_pb_promo:before,
.ds-pricing-table .et_pb_pricing_heading:before,
.ds-pricing-table .et_pb_pricing_heading:after,
.ds-faq .et_pb_toggle:before,
.ds-faq .et_pb_toggle:after {
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ds-services-cta.et_pb_promo:after,
.ds-pricing-table .et_pb_pricing_heading:after,
.ds-faq .et_pb_toggle:after {
border-color: transparent;
border-bottom-color: #fff;
border-width: 5px;
margin-left: -5px;
bottom: 100%;
}
.ds-services-cta.et_pb_promo:after {
bottom: calc(100% - 1px);
}
.ds-services-cta.et_pb_promo:before,
.ds-pricing-table .et_pb_pricing_heading:before,
.ds-faq .et_pb_toggle:before {
border-color: transparent;
border-bottom-color: #bef6f2;
border-width: 15px;
margin-left: -15px;
bottom: 100%;
}
@media only screen and (max-width: 980px) {
.ds-services-column {
margin-bottom: 70px;
}
}Then find this section of CSS:
/*Pricing Table*/
.ds-pricing-table .et_pb_pricing {
list-style-type: none !important;
}
.ds-pricing-table .et_pb_pricing_table {
width: 30% !important;
margin-right: 5%;
border: 1px solid #bef6f2;
outline: 5px solid #defaf8 !important;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) -55px 65px 65px -35px;
box-shadow: rgba(0, 0, 0, 0.2) -55px 65px 65px -35px;
}
.ds-pricing-table .et_pb_pricing_table:last-of-type {
margin-right: 0;
}
.ds-pricing-table .et_pb_pricing_heading {
background: #bef6f2;
}
.ds-pricing-table .et_pb_pricing_content_top {
padding-bottom: 0;
border-bottom: none;
}
.ds-pricing-table .et_pb_sum,
.ds-pricing-table .et_pb_dollar_sign {
font-family: 'priscilla_scriptregular', cursive;
}
.ds-pricing-table li span:before {
content: '\4e';
font-family: ETModules;
font-weight: bold;
font-size: 20px;
color: #bef6f2;
border: none;
position: absolute;
top: 0;
margin-left: -10px;
}
.ds-pricing-table li.et_pb_not_available span:before {
content: '\4d';
}
.ds-pricing-table .et_pb_pricing_table_button {
margin: 0 20px
}
@media only screen and (min-width: 981px) {
.ds-pricing-table .et_pb_pricing_table_1 {
margin-top: 60px;
}
}
@media only screen and (max-width: 980px) {
.et_pb_column .ds-pricing-table .et_pb_pricing_table:nth-child(2n+1) {
clear: none;
margin-top: 0 !important;
}
}
@media only screen and (max-width: 950px) {
.ds-pricing-table .et_pb_pricing_table {
width: 100% !important;
margin-bottom: 90px !important;
margin-top: 0 !important;
}
}And replace it with this:
/*Pricing Table*/
.ds-pricing-table .et_pb_pricing {
list-style-type: none !important;
}
.ds-pricing-table .et_pb_pricing_table {
width: 30% !important;
margin-right: 5%;
border: 1px solid #bef6f2;
/*outline: 5px solid #defaf8 !important;*/ /*Removed 20/02/18*/
-webkit-box-shadow: rgba(0, 0, 0, 0.2) -55px 65px 65px -35px;
box-shadow: rgba(0, 0, 0, 0.2) -55px 65px 65px -35px;
}
/*Added 20/02/18*/
.ds-pricing-table .et_pb_pricing_table:before {
content: '';
outline: 5px solid #defaf8;
outline-offset: 1px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.ds-pricing-table .et_pb_pricing_table:last-of-type {
margin-right: 0;
}
.ds-pricing-table .et_pb_pricing_heading {
background: #bef6f2;
}
.ds-pricing-table .et_pb_pricing_content_top {
padding-bottom: 0;
border-bottom: none;
}
.ds-pricing-table .et_pb_sum,
.ds-pricing-table .et_pb_dollar_sign {
font-family: 'priscilla_scriptregular', cursive;
}
.ds-pricing-table li span:before {
content: '\4e';
font-family: ETModules;
font-weight: bold;
font-size: 20px;
color: #bef6f2;
border: none;
position: absolute;
top: 0;
margin-left: -10px;
}
.ds-pricing-table li.et_pb_not_available span:before {
content: '\4d';
}
/*Removed 20/02/18*/
/*
.ds-pricing-table .et_pb_pricing_table_button {
margin: 0 20px
}
*/
@media only screen and (min-width: 981px) {
.ds-pricing-table .et_pb_pricing_table_1 {
margin-top: 60px;
}
}
@media only screen and (max-width: 980px) {
.et_pb_column .ds-pricing-table .et_pb_pricing_table:nth-child(2n+1) {
clear: none;
margin-top: 0 !important;
}
}
@media only screen and (max-width: 950px) {
.ds-pricing-table .et_pb_pricing_table {
width: 100% !important;
margin-bottom: 90px !important;
margin-top: 0 !important;
}
}You will need to update the colours if you have changed them from the theme colours.
Applies to V1.1, fixed in V1.2