Change width of pricing tables - overflow is funky

Support
#1

Hi there, I added 2 columns to my pricing table and instead of making each column thinner and adding to the side, it put one column directly below the third column, and the 5th column is floating a ways down below the first column. How do I put them all on one row? Had the same issue on another page, here is what it looks like: https://opismedia.com/services-2/re-photography/

#2

Hello @rachaelrenee,

Thanks for asking. :slight_smile:

Can you please share some screenshots as on my end it’s working fine. Please see screenshot. https://screencast.com/t/7CQdRtBjlK, https://screencast.com/t/uTnoecEx3emY

Kindly let me know if I am missing something.

Thanks.

#3

Here is a screenshot of the live page if you keep scrolling down. How it was created was: First row (the one with the highlighted option) is one pricing table. Second row is a second pricing table that I figured out how to add more columns to and did so. Third (out of whack) row constitutes the 3 columns I added to the second pricing table

#4

And here is the page I am working on and experiencing the same issue: One pricing table with added columns, second row is the added columns, as you can see they are all out of whack.

#5

Suddenly it all looks fine. Not sure why… it has been that way for weeks and I just havent had a chance to reach out… well anyway, looks fine now. so thanks!

Edited to say - nevermind - I refreshed the page and it is all wacky again.

#6

I figured it out. It looks to be an issue with the responsiveness. When I make it full screen on my full size monitor, that is when the table gets funky.

If I make the window small enough to fit on my laptop screen it displays fine.

This is happening in both Chrome and Safari. Chrome is totally up to date… Safari I have no clue as I only use it for troubleshooting.

#7

Hey @rachaelrenee,

You’re using a 3 column setup but you have 6 pricing columns. What happens is, the height of your columns are different so it prevents the other columns to float to the left. The recommended setup is use only 3 pricing columns per row. The solution for your current setup if you don’t want that route would be to add this snippet to your page’s Content JS.

jQuery(document).ready(function($) {
	var max = 0;
	$(".x-pricing-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$(".x-pricing-column").css('height', max);
});

Hope that helps.

#8

Thanks, Christian, that fixed the display… its funky on the backend but as long as it displays correctly, who cares!

#9

How do you choose a 6 (or 5 or 4) column setup? I have more pricing tables to build and would like to ensure I do it correctly.

#10

Hello There,

Thanks for updating in! Regretfully the pricing table element will only allow you to insert up to 5 columns. Adding 6 would not be possible. If you have added it in Cornerstone, simply click “Add a pricing column” shown in the image below.

And by the way, to make sure that the pricing table columns will have the same height even when you resize the browser, please update the JS code and use this instead:

(function($) {
    $(window).on('load resize', function() {
        var max = 0;
        $(".x-pricing-column").each(function(index, el) {
            if( $(this).height() > max ){
                max = $(this).height();
            }
        });
        $(".x-pricing-column").css('height', max);
    });
})(jQuery);

If you want to remove the border at the bottom, you may also use this css code in the settings tab, Settings > Custom CSS

.x-pricing-column-info {
    border: none;
}

Hope this helps.

#11

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