Increase Font, Panel Sizes, Button Sizes etc for a Tablet


I chose to use ionic for an app for an Android Tablet.

The UI is nice and simple, I like it. But I received the following feedback:

  • Can we increase the size of everything - The text, buttons, panels etc. Overall, since it is for a tablet, the size of everything needs to be increased, to facilitate better readability. - It looks like the current sizes are optimized for phones.

  • The color scheme needs to be changed to something much more app specific. To start with, is there a theme chooser (like the for instance.)


Font-size can be increase in the scss file. What you could do is create a media query that at 700px(or what ever you want) the font size increase for larger screen sizes.

For making a new theme, this is in the works for our learn site. I’m hoping to get it done soon.



Is there a Gulp task I should run after replacing the font_base_size in the www/lib/variables.scss?

The changes to the scss file doesn’t seem to reflect in the css (I’m assuming there is no auto watch by default in ionic serve?)


Unfortunately not yet (though it’s in the works)

Check out the instructions in the app-base repo