Bootstrap thumbnails overlapping other elements on smaller screens - html

Question

I have created a large form using bootstrap. I didn't use the <form> element however, as I organised input fields in various <input> inside thematic Bootstrap panels.
One of these panels uses a thumbnail as an input button to submit a user photo.
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Biodata</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label for="personidphoto">ID Photo:</label>
<a class="thumbnail thumbnail-button" href="#">
<img src="blank_avatar.png" id="personidphoto">
</a>
</div>
</div>
<div class="col-sm-10">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="birthday">Birthdate:</label>
<input type="number" class="form-control" id="birthday" min="1" max="31" placeholder="DD">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="birthmonth">&nbsp</label>
<input type="number" class="form-control" id="birthmonth" min="1" max="12" placeholder="MM">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="birthyear">&nbsp</label>
<input type="number" class="form-control" id="birthyear" min="1900" max="2015" placeholder="YYYY">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="gender">Gender:</label>
<input type="text" class="form-control" id="gender">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="medical">Notable medical condition(s):</label>
<input type="text" class="form-control" id="medical">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've had to style the thumbnail to it to fit among from-groups.
a.thumbnail.thumbnail-button {
height: 108px;
width: 108px;
display: block;
margin-bottom: 7px;
}
Now the problem is: when re-sizing the screen, the thumbnail then overlaps with the other form-group elements.
What can I do to fix this?

Answer 1

You can use percentages instead of pixels for the image. Checkout this codepen.
CSS:
a.thumbnail.thumbnail-button {
width: 100%;
display: block;
margin-bottom: 7px;
}
Your fixed width breaks your lay-out. When your width is in percentages, your width will scale with the page which solves your problem.

Answer 2

You have set a fixed width and height to the .thumbnail-button. So you need to:
a.thumbnail.thumbnail-button {
margin: 0;
display: block;
margin-bottom: 7px;
}
And give the image, full width:
a.thumbnail.thumbnail-button img {
width: 100%;
}
And give the a.thumbnail.thumbnail-button, a grid class:
<a class="thumbnail thumbnail-button col-md-2">