I am attempting to design a vertical column of buttons that adjust responsively. Despite my efforts, the buttons do not resize properly when the screen size changes. I have explored resources on how to address this issue in Bootstrap and tried adjusting the div sizes with no success.
Here is my code:
CSS:
body {
height: 100%;
width: 100%;
}
#button-container {
height: 75vh;
width: 10%;
margin: 5% 2.5% 0 5%;
background-color: aquamarine;
}
#button-group {
height: 100%;
width: 100%;
}
button {
height: inherit;
max-width: 100%;
word-wrap: break-word;
display: block;
}
HTML:
<div id="button-container" class="container">
<div id="button-group" class="btn-group btn-group-vertical btn-group-lg"
role="group">
<button id="about" type="button" class="btn">About</button>
<button id="resume" type="button" class="btn">Resume</button>
<button id="works" type="button" class="btn">Works</button>
<button id="contact" type="button" class="btn">Contact</button>
</div>
</div>
Link to JsFiddle for further reference: https://jsfiddle.net/TravellingPumpkin/hs227bup/6/