Tablepress CSS mobile query

  • Resolved saparotdesign

    (@saparotdesign)


    7 years, 7 months ago

    Hey there,

    So right now I have set the CSS of my comparison tables columns:

    Example:
    http://headphoneshound.com/best-headphones-under-300/

    To be a certain width like this:
    .tablepress-id-2 .column-1 {
    width: 350px;
    }

    Which is great but I would like it on mobile to not happen. Because on mobile the table is cropped and the user can’t scroll either.
    A percentage value would be better so it’s still responsive.

    Example column 1 to be 33% width instead of 300px

    Please help me to code my CSS so that the tables don’t crop off on mobile view.

    Thanks

    https://wordpress.org/plugins/tablepress/

Viewing 1 replies (of 1 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    7 years, 7 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    You could wrap this in a CSS3 Media Query to have it applied only on large screens, like this:

    @media (min-width: 700px) {
  .tablepress-id-2 .column-1 {
    width: 350px;
  }
}

    Another idea would be to allow scrolling on small screens, e.g. by using the scroll mode of the TablePress Extension from https://tablepress.org/extensions/responsive-tables/

    Regards,
    Tobias

Viewing 1 replies (of 1 total)
  • The topic ‘Tablepress CSS mobile query’ is closed to new replies.