Issue with Mobile view

Resolved DannyG
(@dannygarcia1971)

9 months, 1 week 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)

9 months, 1 week 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)

9 months, 1 week 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)

9 months, 1 week ago

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

https://gyazo.com/cf4ea0287ae56ceefe0601547cb783c7
Thread Starter DannyG
(@dannygarcia1971)

9 months, 1 week 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 9 months, 1 week ago by DannyG.
Plugin Author Aki Hamano
(@wildworks)

9 months, 1 week 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)

9 months, 1 week 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)

9 months, 1 week 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)

9 months, 1 week ago
Ok, great! I really appreciate your help!
- This reply was modified 9 months, 1 week ago by DannyG.
- This reply was modified 9 months, 1 week ago by DannyG.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Issue with Mobile view’ is closed to new replies.

Views