Front-Facing MyListing Pricing Table 2-Column Design

Note: This only applies to those who use the ’27 > Package Selection’ Elementor widget to automatically display the MyListing pricing tables on a front-facing pricing page (i.e., outside the MyListing “flow”). If you are creating custom pricing tables with Elementor or not using a front-facing pricing page, this does not apply to you.

If you add 3 or 4 pricing plans to your tables, you’re pretty much good to go, but what if you only have 2 plans? That’s where things fall apart, and I’ll show you how to address it.

By default, each pricing table item has a 33% width, and with this snippet, we are giving each column a 50% width.

Customization Notes

Note: You cannot leave Line 2 as-is unless you use WPCodeBox or another solution that allows conditional loading of code snippets. I’m providing this snippet as if you are using WPCodeBox, which provides the best option for code snippet management and optimization.

1. Add this snippet to WPCodeBox.
2. Use the Conditional Builder feature to apply it to your front-facing pricing page.

@media only screen and (min-width: 992px) {
.col-md-4 {
    width: 50%;
    }
}

Narrow Tables

For some of you, the above snippet may be good enough, but I’ve provided another snippet for those who want more narrow tables.

@media only screen and (min-width: 992px) {
.col-md-4 {
    width: 50%;
    }
}
@media only screen and (min-width: 992px) {
.row {
    margin-right: 15%;
    margin-left: 15%;
    }
}