Tables in Mobile view

[Anonymous]

List coin balance table displays beyond the normal screen space. Is it possible to make the table fit in just mobile view space ?
See the attached screenshot for more understanding about the problem. On the screenshot, Section B is the normal mobile view space while section A is an extension out of the normal mobile view space. Is it possible to reduce the number of decimal places on the amount as well as the USDT coin name in order to make the table stay in place ? Thanks for your awaited help

Attachments:

You must be logged in to view attached files.

[alexg]

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

[Anonymous]

Use YellowPencil and style the UI. Thank me later.

[alexg]

Thank you @Plug for sharing your success with YellowPencil. I have never tried it but it looks cool.

@timah1993, if you decide to write CSS directly, instead of using a styling tool, just be mindful of rule specificity. If you are trying to do something specific with CSS, perhaps I can help with the rules.

[Author]

Posts