Pro Sites Feature Grid not aligned correctly

Hi,

I'm trying to figure out why my feature grid does not line up correctly with the plan levels.

On the left side, the boxes are not aligned correctly with any of the available plans to the right.

Also, I really don't understand what the "?" are in the drop downs under Indicator (for selected level). What is that?

Here's a screenshot of my Feature Grid: https://cloudup.com/clTtSNEEfx0

Is there a tutorial somewhere that shows you how to properly set up the Pricing and Feature grid?

Also, I can't figure out why one section shows two separate file size numbers.

Here's the URL for the pricing page on the Jazzboo Staging site: http://jazzboo.staging.wpengine.com/pro-site/

  • Dimitris

    Hey there Anthony,

    hope you're doing good and thanks for reaching us!

    On the left side, the boxes are not aligned correctly with any of the available plans to the right.

    You can style your tables from network admin area under Pro Sites -> Pricing Tables -> Styling [sidemenu]

    On the very bottom of this page you can find a Custom CSS section in where you can use the following rule:

    #prosites-checkout-table .pricing-column.psts-level-0 > .title.no-title.no-summary {
      padding: 0 !important;
    }

    This should better align descriptions and indicators.

    Also, I really don't understand what the "?" are in the drop downs under Indicator (for selected level). What is that?

    Could you please grant us with support access to your website to better inspect this?
    I wasn't able to replicate this in my end so far but I may miss something in my setup.

    You can do so via WPMUDEV Dashboard plugin as described here (no need to share credentials):
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-4

    Also, I can't figure out why one section shows two separate file size numbers.

    We'll also investigate this when support access is granted for us. Just let us know here in your next reply that you've done so as we don't get any kind of notifications when access is granted for us.

    Is there a tutorial somewhere that shows you how to properly set up the Pricing and Feature grid?

    You can find all usage related information considering Pro Sites here:
    https://premium.wpmudev.org/project/pro-sites/#product-usage

    Hope that was some help, let us know if further assistance is required!
    Take care,
    Dimitris

  • Adam Czajczyk

    Hello Anthony!

    Thank you for granting access.

    I checked the site but I can't see any "?" characters in drop-down list under "Indicator" on your site. They show as checkmarks/"x" icons as expected for me. Could you try clearing browser cache and checking again? It might be worth to see if that same happens with different browser too. The issue seems to be related to icon characters/images not being handled properly but the site seems to serve them fine. Can you test it with various browsers on your end please and also let me know which browser (including version number and OS) did you use to take a screenshot of that issue?

    Also, I can't figure out why one section shows two separate file size numbers.

    This is because the Pricing Table is set to show it that way. Under "Indicator" section there's an indicator selected to show the value (e.g. 50MB) and then in "Custom Text" that same value is added. Pricing table shows them both. The solution is either to change the "Custom Text" (to some descriptive message or just leave it empty) or to select a different indicator.

    I tried the CSS, but it's still not perfect. Not sure why.

    The Pricing Table /pro-site/ look quite nice to me but I'm not sure what exactly would you wish to achieve. If you could elaborate a bit more on what would you like to change there or, even better, provide us with some rough sketch/drawing of expected design I believe we could help you more with that

    Best regards,
    Adam

  • Anthony

    In the example screenshot for the Pricing Table on the Pro Sites plugin page on this website, the Features box is exactly bottom aligned with the three prices to the right of it. Each feature block lines are exactly aligned with the lines to the right of them. In my example, the top and bottom borders for each feature do not match up exactly with the top or bottom borders of the indicators to the right of them. Does that make sense.

  • Anthony

    Okay, I see that there are different pricing table styles to choose from. The first pricing table style aligns the Compare Features block with the price to the right.

    I changed pricing table style and see that there is one that does set the Compare Features properly and matches the border above and below the indicators across the table. I will see if I can use that one for now, but all of the other ones do not match the above and below borders exactly across the grid.

    I did check another browser and yes, it's a browser issue. I tried to dump the cache in Chrome for Mac, but that did not solve the problem. I would look at how the plugin supports Chrome for Mac.

    I'm using Version 56.0.2924.87 (64-bit)

  • Dimitris

    Hey there Anthony,

    hope you're doing good today!

    I just went ahead and inserted the following CSS rule on the very top of
    Pro Sites -> Pricing Tables -> Styling -> Custom CSS section

    #prosites-checkout-table .pricing-column.psts-level-3.featured li.feature.feature-0.alternate {
        margin-top: 18px;
    }

    Now tables are having a better horizontal alignment.

    As for the browsers, I'm also in latest Chrome in Mac and I'm unable to notice any broken icons as you can see for yourself:

    I'd rather advise to deactivate Chrome's extensions and further test which one is breaking this by activate them back one-by-one, checking each time the Feature Table page.

    Warm regards,
    Dimitris

  • Anthony

    Okay, thanks for setting that piece of code. I see that the pricing table is aligned properly now and looking good.

    I looked into what was breaking the icons for the selectors and it's the Ultimate Branding Plugin. I am not sure if our developer set a piece of code in CSS that is breaking those selector icons or if it's a bug in the plugin. But I suspect it's a bug.

    I had also tested in Opera and the icons were broken there. I don't have any extensions in Opera, so it's not the browser, but the Ultimate Branding plugin that is forcing that bug.

  • Dimitris

    Hey there Anthony,

    hope you're doing good today!

    I doubt this is a conflict between Pro Sites and Ultimate Branding plugins as I can see that they are still activated and I can still see the icons in my end (Chrome, Firefox and Safari on Mac).
    I also had another colleague of mine to test this in Chrome, Firefox and Opera under Windows and all seem to work!

    Have you tried to perform a full conflict test as described in a nice flow chart here?
    https://premium.wpmudev.org/wp-content/uploads/2015/09/Support-Process-Support-Process.gif
    If not, could you please give that a try and let us know about your results?

    Warm regards,
    Dimitris