Table on home page is not displaying full on smartphone.

  • Unknown's avatar
    amitsinghmit14 · Member ·

    Table on home page is not displaying full on smartphone. How to make it automatically adjust like for tablet smart phone etc.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @amitsinghmit14, given the amount of columns, and the content of the cells in your table, I don’t think there is a lot we can do with the table to make it work on mobile devices. The right side of the table starts to get overwritten by the sidebar at about 960px in screen/window width. This is due in part to the length of the words in the cells. At 960, the longer words are full width of the cells and the cell/column widths cannot collapse any further.

    About my only suggestion would be to set that page to full width so that there is not a right sidebar, which would help things down to 650px in screen/window width, but that isn’t much of a gain.

    You can add this custom CSS to make the font smaller for screens 960px and narrower, but it still will not be enough to make things good on smaller mobile devices. This seems to work down to around 540px in screen/window width, but that means small mobile devices still won’t see the full table. 

    @media screen and (max-width: 960px) {
  table td {
    font-size: 75%;
  }
}

    I wish I had some magic for this, but with tables to work on mobile, they have to have only a few columns, and not a lot of content and longer words in the cells.

  • The topic ‘Table on home page is not displaying full on smartphone.’ is closed to new replies.