Hi,

I am doing a project which can be located here:
http://www.collegeandco.com/newsite

I am trying to make a fluid page so it kinda looks good on all devices.

In particular, I have made the main buttons and set a max-width of 23%. However, on wide screens, the buttons are huge so I wish to set a max-height as well.

However, everything I do doesnt work. Any help would be appreciated.

Here is the CSS:
Code:
html {
	height: 100%;
	width: 100%;
	margin: 0;
}

body {
	line-height: 1.3em;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
	height: 100%;
}

p {
	font-size: 0.95em;
	line-height: 1em;
	margin: 1em 0 0;
	font-family:Arial, Helvetica, sans-serif;
}
			
a {
	text-decoration: none;
}

img {
	border: 0;
	max-width: 100%;
	max-height: 100%;
}

.pace .pace-progress {
  background: #fff900;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace-inactive {
  display: none;
}

#header {
	width: 100%;
	height: auto;
}

#logocontainer {
	width: 85%;
	margin: 0 auto;
	clear:both;
}

#menucontainer{
	width: 100%;
	clear:both;
	background-color:#F00;
	margin-bottom:50px;
}

.vcontainer {
	max-width: 23%;	
	display: inline-block;
	background: #FFF;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 8%;
	-moz-border-radius: 8%;
	position:relative;
	margin-left: 0.5%;
	margin-right: 0.5%;
}

p.vehicle-title {
	font-weight:bold;	
}
	
img.a {
	position: relative;
	left: 0;
	top: 0;
	z-index: 10;
        }
	
img.b {
	position: absolute;
	left: 0;
	top: 0;
	}