How to make buttons smaller and mobile responsive

Hi Bryan-

Checking out your site, right now your top block that contains the buttons and the text below it are all in one single row and column, and in particular the buttons are positioned with manual margin settings. That’ll make it look fine on screens a similar size to the one you designed it on, but you’re right that they’ll act strange on smaller devices.

Instead, you’re going to want to set the buttons up in their own row, and each button in their own column so they can react to different screen sizes.

First, add a new row above your current block using the yellow-colored Edit Row control:

Next, add two columns to your new row, using the Edit Row control. Make sure you grab the one for your new empty row above your original row:

Finally, copy-and-paste your buttons into the new columns, and drag the column widths until they more-or-less line up with your original design:

Hi Bryan-

There’s a couple things you’ll need to do to get these on the same row. First, switch highlight one of your buttons and then switch to the Text Editor.

You’ll see your three columns are currently coded like this:

<div class="col-md-5 col-xs-12 col-sm-12"></div>
<div class="col-md-4 col-xs-12 col-sm-12" style="...">...Membership Login...</div>
<div class="col-md-2 col-xs-12 col-sm-12" style="...">...Donate...</div>
<div class="col-md-1 col-xs-12 col-sm-12"></div>

The responsive “Grid” in BoldGrid is based on Bootstrap, which means that every row has up to 12 columns, and these numbers represent how many of the 12 each column occupies, and the abbreviations md, xs, and sm are the screen sizes.

So that means, on a “medium” size screen, you have four columns taking up 5/12, 4/12, 2/12, and 1/12 of the width of the row, but on “small” and “extra small” screens, each column is taking up all 12, which is why they switch to being on top of each other at mobile device sizes.

So, the first step is to modify these so that each button’s column is using 6/12 on small screens:

<div class="col-md-5 col-xs-12 col-sm-12"></div>
<div class="col-md-4 col-xs-6 col-sm-6">...Membership Login...</div>
<div class="col-md-2 col-xs-6 col-sm-6">...Donate...</div>
<div class="col-md-1 col-xs-12 col-sm-12"></div>

You’ll also need to remove the style=”…” parts from the two columns with the buttons.

Then, you’ll also need to use some Custom CSS to make the buttons small enough to fit side-by-side on a mobile device. Here’s the CSS I found worked correctly:

@media (max-width: 991px) {
  a.btn { 
    padding-left: 5px; 
    padding-right: 5px; 
  }
}