Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 10, 2016 at 10:24 am #697208
    realit-treuhand

    Hi,

    We’re aware that this is a known issue, but we would appreciate it if you took a quick look:

    Screenshot

    As you can see on the screenshot above or link below on mobile, we only have 2 columns in this table and the text overlaps. It’s a scrollable data table.

    Is it possible that the text in the left column is displayed on a second line within the cell in order to prevent overlapping?

    Best regards,
    Michel & Aline

    October 10, 2016 at 11:54 am #697236
    Yigit

    Hi Aline!

    Please try adding following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 768px) {
.avia_scrollable_table .avia-table {
    width: auto;
}}

    Best regards,
    Yigit

    October 10, 2016 at 12:22 pm #697246
    realit-treuhand

    Great Yigit, thanks. Now the tables with less content are not full width anymore,

    is it possible to add the requirement that the minimum width is always full width (looks better on mobile)?

    Best regards,
    Michel & Aline

    October 10, 2016 at 12:25 pm #697248
    realit-treuhand

    Update: I just figured it out by myself. Thanks anyway.

    Solution: add min-width: 100%!important;

    October 10, 2016 at 12:38 pm #697253
    Yigit

    Hi!

    You are welcome, glad we could help!
    Thank you for sharing your solution :)

    Cheers!
    Yigit

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘table text overlapping on mobile’ is closed to new replies.