Oxygen Builder Responsive Pricing Table Tutorial Video + Code

Written by
Fabrizio Van Marciano
Posted on
August 6, 2021

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 helps 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.

If you're a WordPress user, building a pricing table in Oxygen is easy, 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 to get started, 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 Code

One of the main issues with creating any design element inside Oxygen is the lack of responsive breakpoints. However, fear not! Oxygen Builder allows you to create custom stylesheets within the editor. This means you can create your own media queries to add to your site.

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

/* CSS FTO MAKE PRICING TABLE RESPONSIVE 
	Source: https://www.fabriziovanmarciano.com */

.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; }
}

More Oxygen Builder Tutorials

If you enjoyed this tutorial and would like to watch more, head over to my YouTube channel here to check out the latest and greatest. Don't forget to subscribe too for future videos.

Are you ready to kickstart your web design project?

Let's work together to turn your website design and creative marketing ideas to life. Hit the 'Start Project' button to book your free 30-minute strategy consultation with me.
.FVM © 2014 - 2021. A division of Van Marciano Media. All Rights Reserved.
We are NOT endorsed, associated, or affiliated with WordPress, WooCommerce, LocalWP, CloudFlare, or Oxygen.
pencilcamera-videouserscode linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Copy link
Powered by Social Snap