Desktop vs Mobile column width

  • Resolved gerusalem

    (@gerusalem)


    3 years, 9 months ago

    Dear Tobias,
    as I am not a CSS expert. I would like to get your help, to correctly show the table between Desktop and Mobile version.
    I also installed your responsive table plugin but probably the css code I used here it is not correct: `

    .tablepress .column-1 {
    width: 10%;
    }

    .tablepress .column-2 {
    width: 25%;
    }

    .tablepress .column-3 {
    width: 15%;
    }

    .tablepress .column-4 {
    width: 50%;
    }`

    I am happy with the column width on desktop, but on mobile it doesn’t look great.

    Can you please help me? What would you suggest as per the type of table content information.
    Really thanks!

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

Viewing 1 replies (of 1 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    3 years, 9 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    The CSS code is correct, in principle. I would however recommend to use the table-ID-based CSS selectors, as this CSS would otherwise apply to all TablePress tables on the site, no matter how many columns they have, and that would take away flexibility in the future. So, please use

    .tablepress-id-7 .column-1 {
  width: 10%;
}
.tablepress-id-7 .column-2 {
  width: 25%;
}
.tablepress-id-7 .column-3 {
  width: 15%;
}
.tablepress-id-7 .column-4 {
  width: 50%;
}

    As for the width on mobile screens: What exactly would you like to achieve here? Changing the width will not really help, as there’s just not enough space for the browser to put everything. For example, long words like “CONFCOOPERATIVE” are very wide and their column can not get smaller. My recommendation would instead be to look into using the collapse mode of the TablePress Responsive Tables Extension, so that the “Abstract” column would be hidden and expandable, for example.

    Regards,
    Tobias

Viewing 1 replies (of 1 total)

The topic ‘Desktop vs Mobile column width’ is closed to new replies.