Bootstrap thumbnails overlapping other elements on smaller screens

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">