Formatting on Full Screen and Mobile are different on Tables

Hey wealthyone,
Thank you for your patience and thanks for the screenshots, it looks like you are using your table in tabular data mode under table styling instead of Pricing Table.
If you check our Table Element demo

you can see that the Pricing Table displays as you are asking for mobile

Please give this a try.

Best regards,
Mike

Hi,
For laptop do you mean 768px ▸ 1024px ?
they should be showing this way now

If you mean a different size then please link to your page.

Best regards,
Mike

Hi,
From your screenshot I see the columns are not the same height, I thought we were talking about having the columns side-by-side on tablets instead of stacked as on mobile.
I assume that we are still talking about the table element, because if they were the column elements you could use the “equal height” option. The tables do not have this option, but you could try a script like this: specific equal height rows
From your screenshot it looks like you could use some css to set a min-height to all of the blue cells, but that would give most of them extra empty space. Probably the best solution would be to add some more text to each item, some general like “Starter Package” or “Most Popular” or “Makes a Great Gift” there is always some filler you can add.

Best regards,
Mike

Hi,
Very good then, it sounds like everything is sorted out, shall we close this then?

Best regards,
Mike

Hi,
I thought that you wrote:

So I could use some css to set a min-height to all of the blue cells, and if it means blank space I think I would prefer that to having it look out of whack like it is now

making the blue area in all columns the same height will add extra blank space to the first 3 columns.
The best solution to achieve his would be using css to set a min-height to the blue cells, if you would like help with this please link to the page, I can’t write the css based on a screenshot.

Best regards,
Mike

Hi,
Thank you for the link, I noticed that in some of your pricing tables that the header row also had different content amounts so it was also having the same issue as the blue cells, I thought that this script would work better at calculating the equal heights for different screen sizes that a manual fixed min-height value. Below is a screenshot of how it looks in my test, but since you have other pricing tables by themselves I believe you would well to add a custom class to the tables that are 4 across and then add this class to the script, if you are not sure how to modify the script then just add the custom class to only those tables and I will post an updated version of the script, otherwise try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_equal_height_pricing_table() { ?>
    <script>
(function($){
$('.avia-pricing-table-container').each(function(){  
  var $columns = $('.pricing-table-wrap li.avia-heading-row',this);
  var maxHeight = Math.max.apply(Math, $columns.map(function(){
    return $(this).height();
  }).get());
  $columns.height(maxHeight).css({'vertical-align':'middle'});
});
$('.avia-pricing-table-container').each(function(){  
  var $columns = $('.pricing-table-wrap li:nth-child(3)',this);
  var maxHeight = Math.max.apply(Math, $columns.map(function(){
    return $(this).height();
  }).get());
  $columns.height(maxHeight);
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_equal_height_pricing_table');

Best regards,
Mike

Hi,
Glad this helped and is working correctly for you in your tests, if you find that there are any conflicts with tables on other pages then I would recommend adding a custom class, otherwise you should be all set.
Let us know so we can close this thread.

Best regards,
Mike