Responsive Options

Owned by Gautam Thapar
Last updated: Jun 13, 2016
2 min read

Buttons X version 1.9.0 introduced responsive options which gave control to users to change button appearance for desktop, tablet and mobile.

 

Prior to version 1.9.0 Buttons X used to automatically adjust button styles based on screen size. But now this has been turned OFF by default. It is better to style your buttons for tablet and mobile screens but If you don't feel like doing so then you can turn ON automatic button styles from settings page.

 

In order to set responsive styles, first you should visit the settings page and set the screen width for tablet and mobile devices. These width's trigger the respective button view.

How to set width and height:

  1. Visit the settings page (Buttons X > Settings).
  2. Then click on the "Responsive" tab.
  3. Enter screen width for tablet and mobile. Default screen width for tablet is 768 pixels and that for mobile is 480 pixels.

Tablet width of 768 pixels means that whenever the screen size is below 768 pixels the tablet related options you set while creating button will come into effect. Same is the case for mobile width.

Once you have set up the responsive settings, go to edit button screen. If you are new to Buttons X then make sure you first read how to create a simple button.

 

On edit button screen you should see "Responsive" tab under "Advanced" section. Click the "Responsive tab". Under it you should see "Tablet" and "Mobile" tabs. The options under both these tabs are exactly similar. So I will be covering only the tablet part.

Tablet / Mobile Options

  1. LAYOUT - Here you can set the width and height of the button for tablets.
  2. PRIMARY TEXT - Under Primary Text the following options are available.
    1. Font Size
    2. Padding Top
    3. Padding Bottom
    4. Padding Left
    5. Padding Right
  3. SECONDARY TEXT - Under Primary Text the following options are available.
    1. Font Size
    2. Padding Top
    3. Padding Bottom
    4. Padding Left
    5. Padding Right
  4. ICON - Under Icon the following options are available.
    1. Icon Size
    2. Divider Size
    3. Divider Position
    4. Padding Top
    5. Padding Bottom
    6. Padding Left
    7. Padding Right
  5. PADDING - Under Padding the following options are available.
    1. Padding Top
    2. Padding Bottom
    3. Padding Left
    4. Padding Right

 

Only the necessary options are made available under tablet and mobile. Changing these options will change the way button appears on tablets and mobiles.