Flip mode causes all text to considerably increase in size!?

  • Resolved ayeaix

    (@ayeaix)


    8 years, 1 month ago

    As said in title. I have this code in my themes stylesheet:

    .tablepress-style1 {
    font-size: 8px !important;
    }
    .tablepress-id-1 thead th,
    text-align: center !important;
    font-weight: bold !important;
    }
    .tablepress-id-1 .row-2,
    font-size: 8px !important;
    }

    What I am after is a table with 2×2, the first row is the headers for 2 subject titles, the send row contains the content displayed in list format of dot points. It displays fine on computer (except header isn’t centering). When I view site on mobile the second row text becomes massive for an unknown reason, and the dot points don’t create any distance between the row 1 header (which is now displayed vertically instead of horizontally as intended– but doesn’t seem to respond to row 2’s content).

    In other words, row 1 which becomes vertical stacks on top of each other, but row 2 with the content in dot points isn’t discernible which “header” it belongs to. Main issue is that when viewed on mobile, the font size seems to revert to some other size not in my custom css?

    Help would be unbelievable useful and appreciated thanks.

    • This topic was modified 8 years, 1 month ago by ayeaix.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter ayeaix

    (@ayeaix)

    Absolutely, thank you for the very prompt reply, ??

    https://www.lifetelos.com/king-warrior-magician-lover/

    Search TABLEPRESS ERROR for exact location (you may need to expand “What Lies Beneath”

    Wish I could have made it easier for you.

    Thread Starter ayeaix

    (@ayeaix)

    changed custom css to:

    .tablepress-style1 {
    font-size: 8px;
    }
    .tablepress-id-1 thead th {
    text-align: center !important;
    font-size: 10px;
    font-weight: bold !important;
    }

    Seems to have gotten rid of the massive text. However, row 1 headers aren’t aligning with corresponding columns (flipped)

    Also when viewed in browser, heading is not aligning to center? Has a blue background that I don’t want also. argh..

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for the link. I’m afraid that the flip mode is not really suited for making this table responsive. It’s best use is for tables as shown on the Extension’s webpage, with small cell contents. For tables like yours – which should not actually be coded as a table, but e.g. as columns or a grid, it’s not a good solution.

    You could try unchecking the “Table Head Row” checkbox maybe, but if that does not help, I suggest to look for a different mode for responsiveness — or to actually show these lists using a columns or grid layout plugin, but not as a table.

    Regards,
    Tobias

    Thread Starter ayeaix

    (@ayeaix)

    Excellent, I have researched column plugins and I think I have found what I am looking for. Thank you kindly for the suggestion as I did not know that it existed.

    Many thanks for the prompt assistance! ??

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Flip mode causes all text to considerably increase in size!?’ is closed to new replies.