jonbon jonbon - 3 months ago 8
CSS Question

Bootstrap buttons in column work on computer but mobile cuts them off

Here are pictures of the buttons. I wanted the buttons to show up together because without columns they were dropping down to a new line and it looked ugly. Now it works on browser, but not on mobile. I'm sure this is because I defined 3 columns and mobile doesn't have room. But when the browser resizes it moves the buttons accordingly. How do I get it to do that on mobile?

Browser:
enter image description here
Mobile:

enter image description here

Here is the code I used:

<div class="row">

<div class="col-xs-4"><a href="#ORM" button class="btn btn-block btn-info">Online Reputation</a></div>
<div class="col-xs-4"><a href="#review" button class="btn btn-block btn-info">Review Management</a></div>
<div class="col-xs-4"><a href="#SEO" button class="btn btn-block btn-info">SEO & Web</a></div>

</div>

Answer

On mobile devices, the available width to display elements is usually too narrow to have multiple in the same row while still keeping their texts readable (ie. Not truncated, heavily shrunk down, or wrapping within themselves).

The most common solution to this problem is to display the elements side-by-side when there is available space to do so, but start to stack them after the screen shrinks below a certain width (by styling them using media queries). This is a key part of responsive design, since desktop layouts rarely translate properly to mobile devices. (See Changing the Page Layout Based on Breakpoints for more details on this.)

Bootstrap has breakpoints built into the framework, so there's no need to do any extra work for it. You have the options of xs, sm, md, and lg, which correspond to predefined ranges of screen widths.

You've already used the xs breakpoint in col-xs-4, which basically means that at every possible screen width, the buttons should be 4 units wide. But this doesn't display properly on narrow mobile devices, as you've noticed - so your next option is to go one width higher and use col-sm-4. Doing so would preserve the 4 unit width at any screen width of sm and above, but would stack the buttons once the screen narrows to the xs range:

<div class="row">
  <div class="col-sm-4"><a href="#ORM" button class="btn btn-block btn-info">Online Reputation</a></div>
  <div class="col-sm-4"><a href="#review" button class="btn btn-block btn-info">Review Management</a></div>
  <div class="col-sm-4"><a href="#SEO" button class="btn btn-block btn-info">SEO & Web</a></div>
</div>

Here's a demo to show you how that looks. Hope this helps! Let me know if you have any questions.