Decrese Rio components size

Posts: 1
Joined: 15 Jun 2015, 16:15

08 Sep 2015, 12:04

Hi all,
I purchased Rio Layout and started working with it. It looks great at higher resolutions (>1600 px) while on lower resolution everything looks "too big" for me: buttons, fonts, expecially switch component.
Is there a good way/best practice to resize everything (when on lower resolution). To make an example, I'll like to make the final page looks like browser zoom is set to 85% or so..
I tried to manually re-define fiìont size with @media, but this means I should redefine every component (and final result is quite ugly for some of them, like select box, and i don't know how to reskin on-off switch..).


Posts: 4316
Joined: 29 Jun 2013, 12:38

15 Sep 2015, 10:50

You can try with CSS 'zoom', but I think this solution won't help you. Therefore you can use Less feature to change font-size of components.

We added LESS support for Modena and Rio. ( , Less Detail: ) You can easily change font-size, color, background-color, .. of components.

For button
- add @button-font-size-small: 10px; in theme-variables.less
- add in theme-less;

Code: Select all

.ui-button {
   font-size: @button-font-size; 
   @media (max-width: 640px) {
       font-size: @button-font-size-small;


Return to “Rio”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest