Tagged: alignment, issues, Pricing Table
-
AuthorPosts
-
September 9, 2020 at 1:50 pm #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,
MortickaSeptember 13, 2020 at 1:57 am #1245443Hey Morticka,
Sorry for the late reply and thanks for the login and video. For your pricing table I added a custom IDget_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.phpfunction 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,
MikeSeptember 14, 2020 at 10:41 am #1245709Hi 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.
September 14, 2020 at 12:55 pm #1245745Hi,
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,
MikeSeptember 14, 2020 at 2:05 pm #1245768Thx 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,
MortickaSeptember 15, 2020 at 12:55 pm #1246023Hi,
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,
MikeOctober 1, 2020 at 3:51 pm #1249896Hi Mike,
Sorry, I thought I already replyed to your last message.
How do I center all the text by default?
Sincerely,
MortickaOctober 2, 2020 at 12:54 pm #1250035 -
AuthorPosts
- You must be logged in to reply to this topic.