CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3075987
user3075987

Reputation: 881

Bootstrap button goes off the page on mobile

On desktop, my button looks great. When I go to mobile version, the button goes outside of the screen width like below:

enter image description here

1) How do I keep this from happened based on my bootply and code below

2) How do I add a top margin to the button too.

Here's my bootply: http://www.bootply.com/KChuJgr967

Here's my html:

.content-section-d {
  padding: 50px 0 0 0;
}
.centered-text {
  text-align: center
}
/* Buttons */

.btn,
.btn:link,
.btn:visited {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  padding: 15px 40px;
  background-color: #db4632;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: uppercase;
  border-color: #db4632;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.btn:active,
.btn:hover {
  background-color: #db4632;
}
<div class="content-section-d">

  <div class="container">
    <div class="row centered-text">
      <div class="col-md-4 col-xs-12">
        <h3>4,000,000+</h3>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3>1,500,000+</h3>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3>150,000+</h3>
      </div>
    </div>
    <div class="row centered-text">
      <div class="col-md-4 col-xs-12">
        <h3>68,000+</h3>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3>2,000+</h3>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3>3 years</h3>
      </div>
    </div>
    <div class="col-lg-12 text-center">
      <a href="https://www.apple.com" target="_blank" class="btn btn-primary btn-lg">Register for a Free Account</a>
    </div>

  </div>
  <!-- /.container -->
</div>
<!-- /.content-section-d -->

Upvotes: 0

Views: 605

Answers (2)

AleshaOleg
AleshaOleg

Reputation: 2201

So, as I noted in comments you need to use @media.

Here, a code for your button, which your should add to stylesheets.

@media(max-width: 1200px) {
    .btn span {
        display: block;
        max-width: 200px;
        white-space: normal;
    }
}

Also, don't forget about add <span> to your button. Now button code is:

<button href="https://www.apple.com" target="_blank" class="btn btn-primary btn-lg"><span>Register for a Free Account</span></button>

And here is full working example on JSFiddle.

P.S. Change max-width in @media to your property.

Upvotes: 1

wander
wander

Reputation: 218

You can use vw and vh CSS rules to change the size of text according to the screen size. In your case if you add this:

  font-size:3vw;
  font-size:1.8vh;

It works pretty well. (Play with values to get exactly what you need)

Upvotes: 0

Related Questions