TOPIC:

Question on how to tweak the theme.

I have an XOT that appears perfectly fine on desktop, but when in mobile (iOS) the footer icons become so tiny! and the chevron and accessibility icon gets messed up. the icons do become larger when in landscape, but the chevron/accessibility icon issue doesn't go away.
By messed up I meant: the default is that the accessibility icon is hidden (the default on desktop is visible, only if you click the chevron it hides it). And on mobile, the chevron doesn't look much like a chevron anymore, making the hidden default not very accessible friendly. In my attached screenshot you can see how tiny they are in relation to the other icons of the browser (firefox).
I'm currently using Future Teacher theme. what would be the CSS code to overwrite their very tiny footer? many thanks!

The simplest solution might be to add Show/Hide Footer Tools from Optional Properties and select: Remove show/hide button.

The chevron will disappear while the Accessibility Options button will remain.

If you want to make the buttons bigger, you could try something like:

@media only screen
and (max-width :500px) {
#x_footerBlock button {
font-size: 2em;
}
}

elegant solution! thank you!