Issue with Mobile view

  • Resolved DannyG

    (@dannygarcia1971)


    1 year, 8 months ago

    Hi!

    First of all thanks a lot for such an amazing plugin!

    I’m wondering if there is a way I could hide a specific column in Responsive mode?

    Right now I have 4 columns and there’s not enough room to fit all the information of the table.

    Or is it possible to decrease the font size in responsive view?

    Thanks in advance for any tips!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Aki Hamano

    (@wildworks)

    1 year, 8 months ago

    Hi.
    I suggest two solutions.

    Assign a class to the cell belonging to the column you want to hide

    @media screen and (max-width:600px) {
  .wp-block-flexible-table-block-table th.hide-mobile,
  .wp-block-flexible-table-block-table td.hide-mobile {
    display: none;
  }
}

    Reduce font size with media queries

    @media screen and (max-width:600px) {
  .wp-block-flexible-table-block-table {
    font-size: 12px;
  }
}
    Thread Starter DannyG

    (@dannygarcia1971)

    1 year, 8 months ago

    Hi,

    Thanks a lot for your fast response. Really appreciate this!

    Could you please give me an advice on the best way on how to implement the 1st option:
    “Assign a class to the cell belonging to the column you want to hide” ?

    I can’t find this custom CSS option in the plugin settings.

    Plugin Author Aki Hamano

    (@wildworks)

    1 year, 8 months ago

    After selecting a cell, you can set it from “Cell Settings” > “Cell CSS class(es)”.

    https://gyazo.com/cf4ea0287ae56ceefe0601547cb783c7

    Thread Starter DannyG

    (@dannygarcia1971)

    1 year, 8 months ago

    Thanks! I have followed your kind advice and implemented your recommended settings, but the cell is still visible on mobile. Could you please kindly check that your CSS works on your side, or maybe we should modify this CSS somehow?

    Please kindly see this screenshot https://www.dropbox.com/s/nr2963i39925j8k/2022-08-25_13-06-18.png?dl=0

    Thanks in advance!

    • This reply was modified 1 year, 8 months ago by DannyG.
    Plugin Author Aki Hamano

    (@wildworks)

    1 year, 8 months ago

    For Cell CSS class(es), enter any class name, NOT a style.
    The styles should be entered through the theme’s style sheet or additional CSS in the customizer.

    Thread Starter DannyG

    (@dannygarcia1971)

    1 year, 8 months ago

    I’m sorry, but what exactly should I insert into “Cell Settings” > “Cell CSS class(es)” to hide the cell? And what should I insert in Theme CSS settings? I’m really confused here. Please help!

    I just put the CSS code you recommended in your 1st response. Should I use a different code in this settings?

    I would really appreciate more details on this please.

    Thanks in advance!

    Plugin Author Aki Hamano

    (@wildworks)

    1 year, 8 months ago

    Cell CSS class(es) is only for giving class names to arbitrary cells, and is not a place to write specific styles.
    For example, enter hide-mobile.

    How you apply the style (for hiding cells) to that class name is related to your theme, not this plugin.
    Therefore, I am happy to let you experiment on your own how to apply the style.

    Thread Starter DannyG

    (@dannygarcia1971)

    1 year, 8 months ago

    Ok, great! I really appreciate your help!

    • This reply was modified 1 year, 8 months ago by DannyG.
    • This reply was modified 1 year, 8 months ago by DannyG.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Issue with Mobile view’ is closed to new replies.