CSS media queries?

  • Resolved Slavek

    (@jackoneill)


    2 years, 7 months ago

    Hi,

    is it possible to use media queries to specify columns widths? Let’s say I want to adjust column width on 766px and below.

    I added the following but that didn’t work.

    @media only screen and (max-width: 766px) {
	.tablepress .column-1 {
		width: 150px !important;
	}
}

    Only

    .tablepress .column-1 {
		width: 150px !important;
	}

    worked fine.

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    CSS media queries are no problem, normally. The question is whether this width can be “fulfilled” when set on a small screen.

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter Slavek

    (@jackoneill)

    Sure, the tables are for example here https://pp.vceliste.cz/ploty-z-pvc/. I’m using responsive scroll but the columns are too narrow on mobile, that’s why I want to use custom widths.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for the link!

    First, please uncheck the “Use DataTables” checkbox on the table’s “Edit” screen. As the individual features are turned off, this is not needed.

    Then, please turn on the scroll mode, by changing the Shortcode on the page to

    [table id=3 responsive=scroll /]

    Then, this “Custom CSS” should work:

    @media only screen and (max-width: 766px) {
	.tablepress-id-3 .column-1 {
		min-width: 150px;
	}
}

    Note that we need to set min-width, and that I recommend to use the table ID in the CSS selector (i.e. .tablepress-id-3 instead of .tablepress, to make sure that this does not accidentally affect other tables.

    Regards,
    Tobias

    Thread Starter Slavek

    (@jackoneill)

    Thank you, Tobias,

    everything works fine now.

    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 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS media queries?’ is closed to new replies.