Custom paddings for “Stack on mobile”

  • Hi there,

    thank you so much for your plugin! It really helps making accessible tables :)!

    Can you please add the option for custom paddings for the “Stack on mobile” option.

    For example I added:

    @media only screen and (max-width: 768px) {
    tr {
    padding-bottom: 2rem;
    display: block;
    }
    }

    for now. Because it was hard to see which table elements belonging together because the padding was all the same :). (PS: I’m not using colors or borders because of design reasons…)

    Thank you and have a great day!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Aki Hamano

    (@wildworks)

    Thanks for the suggestion.

    For now, I don’t plan to implement padding below rows, as I don’t think it will be useful for many users.

    Instead, you could use code like this:

    @media only screen and (max-width: 768px) {
    	.wp-block-flexible-table-block-table .is-stacked-on-mobile tr:not(:last-child) {
    		padding-botom: 2em;
    		display: block;
    	}
    }
    Thread Starter networka

    (@networka)

    Thanks for the more specific code.

    It would be so great if you can think about responsive layout controls to put different values for padding, text size etc. for desktop and mobile.

    This would be awesome.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.