Responsivity for Pricing Table

  • Resolved Michelle Williams

    (@michellewilliamsgeant)


    8 months ago

    I’m trying to create a new pricing table using Pricing Table 7 as the baseline. So far I have 1) added a 4th column, 2) moved ‘column middle’ to the right, 3) text edits, 4) minor formatting edits (colour and text style). I’ve saved what I think looks like a pretty nice pricing table, however, when embedded in a WP page, the table is only responsive to the point that the text wraps within the columns: at no point do the segments stack as with other pricing table apps. Is there a way to force the columns to stack below a certain screen width?

Viewing 1 replies (of 1 total)
  • Plugin Support Aleksandar Vuković

    (@aleksandartms)

    8 months ago

    Hi there.

    A quick heads-up about that specific example (“Pricing Table 7”): it’s built as a Simple table, which has very limited responsiveness. On smaller screens it will:

    • wrap text inside cells, and
    • allow horizontal scroll (when enabled),

    …but it won’t stack columns into cards/segments. That stacked, “accordion/child row” behavior only exists in other table types that support the Responsiveness feature.

    If you want columns to collapse/stack below a certain width, you’ll need to rebuild the pricing table as a Standard/Advanced table (e.g., a manual/linked table that supports responsiveness), then:

    1. Edit the table → Display tab.
    2. Enable Responsiveness.
    3. Optionally force responsive on phone/tablet on certain columns in wpDataTables settings.

    That will give you the mobile “stacked” layout you’re after.
    With Simple tables, there isn’t a setting to force stacking.

    If you prefer to keep Simple tables, the only alternative is a custom CSS/media-query approach that fakes stacking by changing table display on small screens – but it’s brittle and not supported.

    Kind regards.

Viewing 1 replies (of 1 total)

The topic ‘Responsivity for Pricing Table’ is closed to new replies.