Buttons in box and text resizeable - html

Question

Desktop View:
Desktop View
Mobile View:
Mobile View
.event_item {
background: #2b325f;
color: white;
text-align: center;
padding: 30px;
vertical-align: top;
margin:0 0 5px 0;
height: 215px;
}
.event_item h2{margin-bottom:0;}
.event_item h6{margin-bottom:10px;}
.event_summary{display:none;}
.event_item_read p{color:#b00909;text-transform:uppercase;}
.btn-primary{
background:#b00909 !important;
color:white;
border-color: transparent;
}
.btn-align {
text-align: center;
margin-top: -20px;
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row eventRow">
<div class="col-md-4">
<div class="events">
<div class="event_item">
<div class="col-md-12">
<h6>03/16/2016</h6>
<h2>Just a title testing, why is this long?</h2>
<p>Detroit</p>
<h5 style="font-weight: bold;">7pm - 7am</h5>
</div>
</div>
</div>
<div class="btn-align">
<button type="button" class="btn btn-primary doEdit" editKey="'.$key.'"data-toggle="modal" data-target="#editEvent">
Edit Event
</button>
<button type="button" class="btn btn-primary doDelete" delKey="'.$key.'" data-toggle="modal" data-target="#deleteEvent">
Delete Event
</button>
</div>
</div>
</div>
</div>
How would I fix this issue?

Answer 1

You're missing your row class. The column floats which collapses the container, which made you decide to add a set height, which was too short for that amount of text. Remove the fixed height and add the .row class to .event_item and it should be fixed.
https://jsfiddle.net/19aqx97w/
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
.event_item {
background: #2b325f;
color: white;
text-align: center;
padding: 30px;
vertical-align: top;
margin:0 0 5px 0;
}
.event_item h2{margin-bottom:0;}
.event_item h6{margin-bottom:10px;}
.event_summary{display:none;}
.event_item_read p{color:#b00909;text-transform:uppercase;}
.btn-primary{
background:#b00909 !important;
color:white;
border-color: transparent;
}
.btn-align {
text-align: center;
margin-top: -20px;
margin-bottom: 20px;
}
<div class="container">
<div class="row eventRow">
<div class="col-md-4">
<div class="events">
<div class="event_item row">
<div class="col-md-12">
<h6>03/16/2016</h6>
<h2>Just a title testing, why is this long?</h2>
<p>Detroit</p>
<h5 style="font-weight: bold;">7pm - 7am</h5>
</div>
</div>
</div>
<div class="btn-align">
<button type="button" class="btn btn-primary doEdit" editKey="'.$key.'"data-toggle="modal" data-target="#editEvent">
Edit Event
</button>
<button type="button" class="btn btn-primary doDelete" delKey="'.$key.'" data-toggle="modal" data-target="#deleteEvent">
Delete Event
</button>
</div>
</div>
</div>
</div>

Answer 2

According to your comment, you want to align the buttons in your desktop view the way it is in your mobile view. You are currently using margin-top: -20px; on your .btn-align container. Remove this and your buttons will align themselves right after your content.
EDIT: Excuse me, I totally misunderstood you. Here should be what you actually want to achieve -> fiddle
You simply used a wrong colum-rule for your container. You did just put col-md-4 in it while it should be col-md-12 or empty (like you've done it for your mobile one).
By adding col-*-12 you take the displays full width. Same goes for if you leave that empty. Since you've set up a value for md and not for xs, your xs was totally fine while your md looked a bit different. I hope now this solves your problem.
Note: If you want your buttons to be a bit in your event-item, you just add back your margin-top: -20px;. You can check my previous answer for that. Hope that helps and clarifies everything now.

Answer 3

use percentages as that I used in the .event_item portion. Percentages will automatically adjust it.
.event_item {
background: #2b325f;
color: white;
text-align: center;
padding: 5%;
vertical-align: top;
margin:0 0 5px 0;
height: 70%;
}