Support » Plugin: TablePress » Make two column table 50% to 50% screen width ratio on mobile view

  • Resolved mikehall96

    (@mikehall96)


    I have a table for my website cookies on my Privacy Policy page. The table consists of 2 columns. Originally the columns appeared at a ratio of about 75% to 25% page width on all views (mobile, tablet, desktop). I managed to fix this on desktop with some CSS and make it 50% to 50%, but issue still remains on mobile view.

    I believe that the reason issue persists on mobile view is because TablePress will not break a joined word / piece of text. For example, the cookie term “USER_ALLOWED_SAVE_COOKIE” I think is being made to stay on one line, which therefore forces the second column to become squashed. I want it to prioritise a 50% to 50% column split, so in the case of on mobile and very small screen devices it forces joined pieces of text which are longer than the 50% column space allowed to be broken at the point of column overlap and the balance of the text to appear on the following line.

    So in the case of this example it would look something like this:

    “USER_ALLOWED_SA
    VE_COOKIE”

    The ability to control column widths in the settings would solve issues like this.

    Thanks, Michael

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • I have the same issue too. I have 2 columns for page: https://www.cryptozink.io/tokens-airdrops/. I just received an email from Google Search Console saying this page has issues. On mobile, the 2-columns are wide.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi mikehall96,

    thanks for your post, and sorry for the trouble.

    It’s actually the browser and not TablePress that is not breaking the joint word “USER_ALLOWED_SAVE_COOKIE” 🙂
    You can however force that, by adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-list-of-cookies .column-1 {
      word-break: break-word;
    }

    cryptozink: Your problem is a bit different. You could instruct the browser to shrink images, by adding

    .tablepress-id-1 img {
      max-width: 100%;
    }

    Regards,
    Tobias

    Hi Tobias,

    That looks to have solved my issue!

    Thanks, Michael

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

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

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

    WOW, you’re the man. Works perfectly: https://www.cryptozink.io/tokens-airdrops/

    I gave the plugin a perfect review.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    great! Thanks for the confirmation!

    Best wishes,
    Tobias

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.