Hello,
Sorry about this. The UIs are not meant to be used on mobile, since I am not a mobile developer! The UIs simply output some markup and you, the web developer, can style them any way you want. The UIs have all the classes you need to apply CSS easily.
The way I see it there are two ways to approach this problem:
1. One is to reduce the font size and reduce the padding size, hoping that all the information will fit on the screen. The easiest way to control the text and padding sizes is via the Customizer, but you can also use CSS for this.
2. The other way would be to display the balances first, then display the available balances in another UI. You can do this by using the shortcode twice, consecutively: First hide one column in the first UI, then hide the other column in the second UI.
Here’s how you would hide the available balance from one UI and the total balance from the other UI:
.dashed-slug-wallets.balance.balance-list:nth-child(odd) table .available_balance {
display: none;
}.dashed-slug-wallets.balance.balance-list:nth-child(even) table .balance {
display: none;
}You can always add your CSS rules in: “Customizer” -> “Additional CSS”.
Of course, the UIs are overridable, in case you want to provide your own markup. The documentation discusses this in the section: “Frontend” -> “Template modifications” -> “Modifying markup”.
Hope this helps.
with regards