Table width on Smartphone

  • Resolved secc

    (@secc)


    4 years, 8 months ago

    Hi Tobias

    I try to set the column with all the same for the page. On big screen it works pretty nice, but on mobile it doesnt. I try to add the following code, but this has no effect. Why does it looks different on mobile and how can i fix the widgth on small devices?
    Thank you for your help.
    Manuel

    @media (max-width: 500px) {

    .tablepress .column-2,
    .tablepress .column-3,
    .tablepress .column-4,
    .tablepress .column-5,
    .tablepress .column-6 {
    white-space: nowrap;
    width: 100px !important;
    }

    }

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    Using white-space: nowrap; will not really help here. Instead, I recommend to set the width AND the minimum width:

    @media (max-width: 500px) {
  .tablepress .column-2,
  .tablepress .column-3,
  .tablepress .column-4,
  .tablepress .column-5,
  .tablepress .column-6 {
    width: 100px !important;
    min-width: 100px !important;
  }

}

    Regards,
    Tobias

    Thread Starter secc

    (@secc)

    Hi Tobias.
    Thank you for your fast reply. Looks like it works.
    Best regards
    Manuel

    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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Table width on Smartphone’ is closed to new replies.

Tags