Pricing Table Help

Hey navindesigns,
Thank you for the link to your site, it looks like the burger menu color is black on a black header background, so it is not seen, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field to make it white:

.header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #fff;
}

For the table height, Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_table_script() { ?>
  <script>
(function($){
  $(window).load(function(){
  	$('.page-id-2333 .avia-pricing-table-container').each(function(){  
     var $columns = $('.pricing-table',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_table_script', 99 );

and this css in your Quick CSS:

.page-id-2333 .pricing-table li.empty-table-cell {
    display: block;
}
.page-id-2333 .avia-pricing-table-container .pricing-table li:nth-child(6) {
	height: 62px;
}

Best regards,
Mike

Hi,

Thank you for the update.

if I wanted this to ONLY affect desktop, what adjustments do I have to make?

You can prepend the selector .avia_desktop to the css rules to limit them to desktop view.

.avia_desktop .page-id-2333 .pricing-table li.empty-table-cell {
    display: block;
}

.avia_desktop .page-id-2333 .avia-pricing-table-container .pricing-table li:nth-child(6) {
	height: 62px;
}

Also, adjust the selector in the script a bit:

function custom_table_script() { ?>
  <script>
  (function($) {
    $(window).on('load', function() {
      $('.avia_desktop .page-id-2333 .avia-pricing-table-container').each(function() {
        var $columns = $('.pricing-table', 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_table_script', 99);

Best regards,
Ismael

Hi,
Try wrapping the css in a media query for only desktops, like this:

@media only screen and (min-width: 768px) { 
/* your css here */
}

It looks like the page that you linked to has a page ID of 2606, which is different than above.
If you need further help perhaps a admin login would help us.

Best regards,
Mike

Hi,
I changed to this:

  @media only screen and (min-width: 768px) {       
         .avia_desktop .page-id-2606 .pricing-table li.empty-table-cell {
    display: block;
}
}

please clear your browser cache and check.

Best regards,
Mike