Fix Scaling of Cover Image and Cover Bottom Section

[shelbourn]

Currently, when scaled down my Profile Image and the Cover Bottom section shrink too much. Find a way to increase the proportions of these elements when the page is scaled down.

[shelbourn]

Ideas for fix:

Remove centering col-xs-4 from around the image col-xs-4

Change font-size: x.x vw to x.x vh

[shelbourn]

Fixed with modifications to the HTML and CSS. See below:

Changed the HTML per below (see commented out section) --

<div id="home" class="jumbotron-fluid">
    <div class="wide">
        <div class="row">
            <!-- <div class="col-xs-4"></div> -->
            <div class="center-block col-xs-4 logo profile-img" style="float: none;"><img class="img-circle black-border text-center" src="http://bit.ly/Matt_Shelbourn_Profile"></div>
            <!-- <div class="col-xs-4"></div> -->
        </div>
        <div class="cover-bottom-align">
            <div class="row">
                <div class="col-xs-4 line pull-left"><hr></div>
                <div class="col-xs-4 line pull-right"><hr></div>
            </div>
            <div id="cover-bottom">
                <div class="row">
                    <div class="col-xs-12 text-center">
                    <h1 id="h1-cover">Matthew Shelbourn | Portfolio</h1>
                    </div>
                </div>
                <div class="row fa-size">
                    <div class="col-xs-3"><i class= "fa fa-camera-retro"></i></div>
                    <div class="col-xs-3"><i class= "fa fa-code"></i></div>
                    <div class="col-xs-3"><i class= "fa fa-css3"></i></div>
                    <div class="col-xs-3"><i class= "fa fa-html5"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>

Changed the method for scaling within CSS per below --

.profile-img {
    width: 35vmax;
}

.black-border {
    border: 0.5vmin solid rgba(0,0,0,0.7);
}

#h1-cover {
    font-size:3vmax;
    padding-bottom: 3vmin;
    text-transform: uppercase;
}

.navbar-right {
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5vh;
}

.navbar-left {
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5vh;
}