Oxygen Builder 3.8: Responsive Pricing Table Tutorial [Video + Code Snippet]

Welcome to another Oxygen Builder video tutorial. In this video, you’re going to learn how to create a stunning responsive pricing table using only the visual design options in Oxygen.

There is no better way to showcase and offer your products and services than to use a well-designed pricing table on your website. Pricing tables are super user-friendly and help your customers find exactly what they’re looking for quickly. If you have more than one product or service, it allows them to compare features, benefits, and of course, the price.

Pricing tables come in all shapes and sizes. Some are simple and clean in design; others are more complex and busy.

Building a pricing table in Oxygen is easy if you’re a WordPress user, and you don’t need to install any additional table-building plugins to do this. You can do it all from complete scratch inside of your Oxygen editor.

OK, so you’ve just discovered this tutorial and have no idea what Oxygen Builder is, don’t worry, let me explain briefly.

Oxygen Builder is an all-in-one theme-building toolkit for WordPress. It’s a visual theme builder like no other. You have complete control over the design and layout of your WordPress website using Oxygen Builder. From the most simple things like blog post layout to detailed elements like the navigation and custom modals.

Click here to learn more about Oxygen Builder. No, it’s not an affiliate link, so don’t worry 😉

OK, so, you can watch the video tutorial below. Follow the steps that I take to create your awesome-looking responsive pricing table.

If you get stuck or don’t feel you can recreate this table for your website, I’m here to help. Check out my design services page, or why not book a web design consultation with me, and we can go through it step by step.

Responsive CSS Code Snippet

One of the issues with creating any custom design element inside Oxygen is the lack of responsive breakpoints. However, fear not! Oxygen allows you to create and manage multiple stylesheets. This means you can create a specific stylesheet just for your custom media queries.

So, below, you will find the mobile-friendly code snippet to use to make the pricing table above mobile-friendly 🙂 Feel free to copy the CSS code and modify it any way you wish.

/* CSS FTO MAKE PRICING TABLE RESPONSIVE/*

.price-container {
	-webkit-clickpath: polygon (0 0, 100% 0, 100% 90%, 0 90%, 0 100%);
}

@media only screen and (max-width: 992px) {
	.best-deal {
		left: 395px; }
}

@media only screen and (max-width: 920px) {
	.best-deal {
		left: 380px; }
}

@media only screen and (max-width: 895px) {
	.best-deal {
		left: 350px; }
}

@media only screen and (max-width: 830px) {
	.best-deal {
		left: 320px; }
}

@media only screen and (max-width: 770px) {
	.best-deal {
		left: 260px; }
}

@media only screen and (max-width: 630px) {
	.best-deal {
		left: 240px; }
}

@media only screen and (max-width: 600px) {
	.best-deal {
		left: 200px; }
}

@media only screen and (max-width: 560px) {
	.best-deal {
		left: 180px; }
}

Oxygen Builder Pro Tutorials

If you enjoyed this free tutorial, check out my membership for access to pro-Oxygen Builder tutorials and code snippets! See below for more information.