Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  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 . Click on "Tablet" are exactly similar. So I will be covering only the tablet part.

Image Added

Tablet 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.

Filter by label (Content by label)
showLabelsfalse
max5
spacesBX
showSpacefalse
sortmodified
reversetrue
typepage
cqllabel in ("tablet","mobile","desktop","responsive") and type = "page" and space = "BX"
labelstablet mobile responsive desktop

...