html - Angular Material FAB button will not resize -

i building simple webapp, using angularjs , angular material. using cpuple <md-button class="md-fab">hi</md-button> , them quite large. had made width, height equal 400px. screen gets smaller shrink down size of 115px on smallest screen. have tried bunch of things current solution making bunch of different buttons , applying ng-show them when screen size.

this solution works repetitive , when change 1 thing button need 5 times. there better solution issue?

my html code below:

html

<!--width >= 1280px--> <div hide show-gt-md flex="100"  class="md-padding" layout="row" layout-align="space-between">    <div flex="33">     <md-button flex style="height: 400px; width: 400px; background-color: #0b97c4; " class="answerbuttons md-fab" aria-label="eat cake"><h1 class="headertext">pepsi</h1></md-button>   </div>    <div flex="33" style="margin: auto">     <div style=" height: 250px; width: 250px;  border-radius: 150px; margin: auto; text-align: center" md-whiteframe="3">       <h1 class="headertext" style="margin: auto; vertical-align: middle; line-height: 250px">vs.</h1>     </div>   </div>   <div flex="33">     <div>       <md-button style="height: 400px; width: 400px;" class="md-fab" aria-label="eat cake"><h1 class="headertext">coke</h1></md-button>     </div>   </div>  </div>  <!--960px <= width < 1280px--> <div hide show-md flex="100"  class="md-padding" layout="row" layout-align="space-between">    <div flex="33">     <md-button flex style="height: 300px; width: 300px; background-color: #0b97c4; " class="answerbuttons md-fab" aria-label="eat cake"><h1>pepsi</h1></md-button>   </div>    <div flex="33" style="margin: auto">     <div style=" height: 200px; width: 200px;  border-radius: 150px; margin: auto; text-align: center" md-whiteframe="3">       <h1 style="margin: auto; vertical-align: middle; line-height: 150px">vs.</h1>     </div>   </div>   <div flex="33">     <div>       <md-button style="height: 300px; width: 300px;" class="md-fab" aria-label="eat cake"><h1>coke</h1></md-button>     </div>    </div>  </div>  <!--600px <= width < 960px--> <div hide show-sm flex="100"  class="md-padding" layout="row" style="overflow: visible;">    <div flex="40">     <md-button flex style="height: 215px; width: 215px; background-color: #0b97c4; " class="answerbuttons md-fab" aria-label="eat cake"><h1>pepsi</h1></md-button>   </div>    <div flex="20" style="margin: auto">     <div style=" height: 115px; width: 115px;  border-radius: 150px;  bottom: 0; margin:auto; text-align: center" md-whiteframe="3">       <h1 style="margin: auto; vertical-align: baseline; line-height: 125px">vs.</h1>     </div>   </div>   <div flex="40">     <div>       <md-button style="height: 215px; width: 215px;" class="md-fab" aria-label="eat cake"><h1>coke</h1></md-button>     </div>    </div>  </div>  <!--width <= 600px--> <div hide-gt-xs flex="100" layout="row" style="overflow: visible;">    <div flex="40">     <md-button flex style="height: 115px; width: 115px; background-color: #0b97c4; " class="answerbuttons md-fab" aria-label="eat cake"><h1>pepsi</h1></md-button>   </div>    <div flex="20" style="margin: auto">     <div style=" height: 65px; width: 65px;  border-radius: 150px;  bottom: 0; margin:auto; text-align: center" md-whiteframe="3">       <h1 style="margin: auto; vertical-align: baseline; line-height: 65px">vs.</h1>     </div>   </div>   <div flex="40">     <div>       <md-button style="height: 115px; width: 115px;" class="md-fab" aria-label="eat cake"><h1>coke</h1></md-button>     </div>    </div>  </div> 

as see code quite messy , real pain change anything. please if can!