CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
gates
gates

Reputation: 4583

Why is that div resizes with the content

I am trying to create a div which looks like a button with the help of the bootstrap framework. But when I increase the font size of the content inside the div, the width and height of the button changes. I just want to increase the font. But the button size should be same.
Here is the code

.bigfatbutton{
    margin-top: 1em;
    margin-bottom: 2em;
    width: 80%;
    margin-left: 2em;
    background: #6130a3;
    height: 4em;
    text-align: center;
    padding-top: 1em;
    color: white;
    font-size: 15px;
}
<div class="bigfatbutton">
    Review & Pay
</div>

Note: I just want to know onething. Some helpful persons are mentioning me to use px for padding and margin instead of em I have used in my code snippet. Is that okay? How will it effect the responsiveness is my concern. Please help me in this regard.

Upvotes: 0

Views: 70

Answers (3)

CerebralFart
CerebralFart

Reputation: 3490

The problem is that you are defining your margins and paddings relative to your fontsize. (you defined them in em, which is equal to the font-size.) This can easily be overcome by changing the em sizes to pt (or px). You'd then get something like this:

.bigfatbutton{
  margin-top: 15pt;
  margin-bottom: 30pt;
  width: 80%;
  margin-left: 30pt;
  background: #6130a3;
  height: 60pt;
  text-align: center;
  padding-top: 15pt;
  color: white;
  font-size: 15px;
}
<div class="bigfatbutton">
  Review & Pay
</div>

Upvotes: 1

Domain
Domain

Reputation: 11808

Add overflow: hidden to .bigfatbutton. Just change the font-size according to your requirement, button size would remain same.

Here is the working example.

I also recommend you to refer CSS Box Model so that you can make changes in your code as you want.

Upvotes: 0

Booster
Booster

Reputation: 434

Try this.

  .bigfatbutton{ 
    width: 80%;
    background: #6130a3;
    text-align: center;
    color: white;
    font-size: 18px;
    padding: 20px 40px;
}
    <div class="bigfatbutton">
        Review & Pay
    </div>

Demo

Upvotes: 1

Related Questions