Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1244631

    Hi guys,

    In the backend I have 4 rows: 1 Description, 2 standard and 1 marked rows.

    The description row is aligned in the backend. On the front end it’s not aligned at all, it looks awful.
    Turning on “hide empty cells” did not work.

    Question: How can I align the cells/rows of the entire pricing table, including responsiveness/good readability on mobile?

    Video of the problem and login data in private content.

    Thanks in advance.

    Sincerely,
    Morticka

    #1245443

    Hey Morticka,
    Sorry for the late reply and thanks for the login and video. For your pricing table I added a custom ID get_height_from_first_column so the following script would not affect other possible pricing tables on your site.
    The logic of the script gets the height of each cell from the first column and applies it to the other cell in the same row, regaining with the fourth row. Please ensure that the first column has the largest cells.
    This is the script I added to your child theme functions.php

    function pricing_table_get_height_from_first_column(){
      ?>
      <script>
    (function($){
      $(window).load(function(){
      	var $this = $('#get_height_from_first_column .pricing-table-wrap:first-child');
      	var $that = $('#get_height_from_first_column .pricing-table-wrap:nth-child(n+2)');
        var t4 = $this.find('li:nth-child(4)').outerHeight();
        var t5 = $this.find('li:nth-child(5)').outerHeight();
        var t6 = $this.find('li:nth-child(6)').outerHeight();
        var t7 = $this.find('li:nth-child(7)').outerHeight();
        var t8 = $this.find('li:nth-child(8)').outerHeight();
        var t9 = $this.find('li:nth-child(9)').outerHeight();
        var t10 = $this.find('li:nth-child(10)').outerHeight();
        var t11 = $this.find('li:nth-child(11)').css('height', '86px').outerHeight();
        var t12 = $this.find('li:nth-child(12)').outerHeight();
        var t13 = $this.find('li:nth-child(13)').outerHeight();
        var t14 = $this.find('li:nth-child(14)').outerHeight();
        var t15 = $this.find('li:nth-child(15)').outerHeight();
        $that.find('li:nth-child(4)').css('height', t4 + "px");
        $that.find('li:nth-child(5)').css('height', t5 + "px");
        $that.find('li:nth-child(6)').css('height', t6 + "px");
        $that.find('li:nth-child(7)').css('height', t7 + "px");
        $that.find('li:nth-child(8)').css('height', t8 + "px");
        $that.find('li:nth-child(9)').css('height', t9 + "px");
        $that.find('li:nth-child(10)').css('height', t10 + "px");
        $that.find('li:nth-child(11)').css('height', t11 + "px");
        $that.find('li:nth-child(12)').css('height', t12 + "px");
        $that.find('li:nth-child(13)').css('height', t13 + "px");
        $that.find('li:nth-child(14)').css('height', t14 + "px");
        $that.find('li:nth-child(15)').css('height', t15 + "px");
      });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'pricing_table_get_height_from_first_column');

    So this seems to be working except the row Content & Huisstijl in which the first column was smaller than the others so I adjusted the cell with this line:
    var t11 = $this.find('li:nth-child(11)').css('height', '86px').outerHeight();
    Please clear your browser cache and check.

    Best regards,
    Mike

    #1245709

    Hi Mike,

    Wow, it looks beautiful on desktop, thank you very much!! :D

    Only on mobile most of the text is gone? How do I fix that? (screenshot in private content)

    Sincerely,
    Morticka

    <EDIT> Sorry, I had to remove the script in functions.php, because the rollover behaviour of links and buttons was not working anymore. After I removed it, everything worked again.

    #1245745

    Hi,
    Thank you for the feedback, I adjusted the code so it will not interfere with the mobile version.
    Please clear your browser cache and check.

    Best regards,
    Mike

    #1245768

    Thx Mike! Everything works fine again. It looks great on desktop, but on mobile the description row is not visible, so there I would have to use a different version. (I don’t think there’s enough room either.)

    Is there a way to automatically align every pricetable, be it with a description row or a standard row? And center the text? Screenshot in private content.

    Sincerely,
    Morticka

    #1246023

    Hi,
    Glad to hear this helps for desktop, for mobile the first column with the descriptions is not shown because there is not enough room to show it. You could use a different mobile table by hiding this one and showing your new one, if you find one that matches your needs for mobile.

    Best regards,
    Mike

    #1249896

    Hi Mike,

    Sorry, I thought I already replyed to your last message.

    How do I center all the text by default?

    Sincerely,
    Morticka

    #1250035

    Hi,
    Sorry, on the test page, linked below, I see that the first column is aligned right, while the others are centered, to center the first column please try this css:

    #get_height_from_first_column ul li {
    	text-align: center !important;
    }

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.