Formidable Forms Visual Views RTL Responsive Table Fix

The new Visual Views plugin for Formidable Forms has an option under Table Settings called “Make table responsive”, which hides the table headers (th) and uses some CSS to insert the header values inline into each table row with a bit of extra padding.

On a right-to-left site, this results in the header labels appearing on the left of the values, rather than the right.

Here’s a quick bit of CSS that fixes it:

@media only screen and (max-width: 760px),(min-device-width: 768px) and(max-device-width: 1024px) {
	body.rtl table.frm-responsive-table td {
		padding-right: 50%;
		padding-left: unset;
	}
	body.rtl table.frm-responsive-table td:before {
		right: 10px;
	}
}