seo Question posted in
Some basic information to get you started with this can be found here.

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

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>
Tags:

2

Answers


  1. 0

    You need to change text size to something smaller and or less padding of the buttons for it to fit on mobile. Where is your CSS?

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search