html,body { box-sizing: border-box; padding:3px; margin:0; height:100%; width:100%; } button.calcbutton { display: inline-block; position: relative; padding: 0; line-height: normal; cursor: pointer; vertical-align: middle; text-align: center; overflow: visible; /* removes extra width in IE */ width:24%; height:24%; font-weight: bold; color: #555555; } button.calcbutton2 { display: inline-block; position: relative; padding: 0; line-height: normal; cursor: pointer; vertical-align: middle; text-align: center; overflow: visible; /* removes extra width in IE */ width:24%; height:24%; font-weight: bold; color: #555555; } button.calcbutton3 { display: inline-block; position: relative; padding: 0; line-height: normal; cursor: pointer; vertical-align: middle; text-align: center; font-size:120%; overflow: visible; /* removes extra width in IE */ width:12%; height:24%; } button.actionbutton { display: inline-block; position: relative; padding: 0; line-height: normal; cursor: pointer; vertical-align: middle; text-align: center; overflow: visible; /* removes extra width in IE */ width:33%; height:33%; } div.wrapper{ float:left; /* important */ position:relative; /* important(so we can absolutely position the description div */ width:25%; height:25%; margin:0; padding:1px; border: 0.1em solid; box-shadow: 3px 3px 2px #888; text-align: center; box-sizing: border-box; background-color:#f0eeee; } div.wrapper2{ float:left; /* important */ position:relative; /* important(so we can absolutely position the description div */ width:12.5%; height:25%; margin:0; /* padding:1px; */ border: 0.1em solid; box-shadow: 2px 2px 1px #888; text-align: center; box-sizing: border-box; background-color:#f0eeee; } button:active{ background:black; color: white; } div.description{ position:absolute; /* absolute position (so we can position it where we want)*/ bottom:0px; /* position will be on bottom */ left:0px; width:100%; /* styling below */ background-color:black; font-family: 'tahoma'; color:white; opacity:0.8; /* transparency */ filter:alpha(opacity=80); /* IE transparency */ text-align:center; } div.catwatermark{ position:absolute; top:3%; left:3%; width:20%; background-color:black; color:white; text-align:center; font-size: 20px; display: none; } @media only screen and (max-aspect-ratio: 6/4) { div.description{ min-height:20%; } } .container{ width: 100%; height: 100%; margin: 0 auto; overflow: visible; box-sizing: border-box; } .row1{ margin: 0 auto; width: 100%; height: 34%; } .row2{ margin: 0 auto; width: 100%; height: 66%; } .div1{ height:100%; width: 34%; float: left; text-align: center; box-sizing: border-box; overflow: auto; /* background-color:white; */ padding-top: 0; padding-bottom: 10px; padding-right: 5px; padding-left: 5px; } .div2{ height: 100%; width: 33%; font-size: 0; float: left; box-sizing: border-box; padding-top: 0; padding-bottom: 10px; padding-right: 5px; padding-left: 5px; } .div3{ height: 100%; width: 33%; float: left; box-sizing: border-box; padding-top: 0; padding-bottom: 10px; padding-right: 5px; padding-left: 5px; } .div4{ height: 100%; width: 34%; float: left; box-sizing: border-box; font-size: 6px; padding-top: 10px; padding-bottom: 10px; padding-right: 5px; padding-left: 5px; } .div5{ height: 100%; width: 66%; float: left; box-sizing: border-box; font-size: 6px; padding-top:10px; padding-bottom:10px; padding-right: 5px; padding-left: 5px; } p.description_content{ padding:10px; margin:0px; } @media screen and (min-width: 892px) { .calcbutton{ font-size: 18px; } .calcbutton2{ font-size: 14px; } .actionbutton{ font-size: 13px; } div.description{ font-size: 15px; } .invoice{ font-size: 14px; } } @media (max-width: 891px) and (min-width: 386px) { .calcbutton{ font-size: 12px; } .calcbutton2{ font-size: 9px; } .actionbutton{ font-size: 12px; } div.description{ font-size: 13px; } .invoice{ font-size: 12px; } } @media screen and (max-width: 385px){ .calcbutton{ font-size: 8px; } .calcbutton2{ font-size: 7px; } .actionbutton{ font-size: 10px; } div.description{ font-size: 11px; } .invoice{ font-size: 10px; } }