CSS button getting cut off by containers

HTML & CSS
1

The website is here: http://koolcollar4dogs.com/test/

The problem I’m having is when you scroll down there is a blue button that has it’s top and bottom cut off by the surrounding containers. What’s the best way to go about fixing this?

Thanks!

2

Hi ajrdesign and welcome to the forums. :slight_smile:

The problem is that the line-height there is insufficient to display the button. Find this rule in your CSS:

.button,
button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		background-color: #52a8e8;
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #52a8e8), color-stop(100%, #377ad0));
		background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0);
		background-image: -moz-linear-gradient(top, #52a8e8, #377ad0);
		background-image: -ms-linear-gradient(top, #52a8e8, #377ad0);
		background-image: -o-linear-gradient(top, #52a8e8, #377ad0);
		background-image: linear-gradient(top, #52a8e8, #377ad0);
		border-top: 1px solid #4081af;
		border-right: 1px solid #2e69a3;
		border-bottom: 1px solid #20559a;
		border-left: 1px solid #2e69a3;
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		border-radius: 16px;
		-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
		-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
		box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
		color: #fff;
		padding: 6px 10px;
		text-align: center;
		text-shadow: 0 -1px 1px #3275bc;
		width: 112px;
		-webkit-background-clip: padding-box;
	  font: 700 16px/normal 'Open Sans', sans-serif;
	  text-decoration: none;
  }

Scroll down to the second-last line and change “normal” to 40px (or more). 40px seems to be the smallest figure you can get away with here. I’ve used px as that’s what you’ve used elsewhere; you can set it in ems or % if you prefer.

3

Excellent! That fixed it. Thanks so much!

4

You’re welcome. :slight_smile: It’s great when it’s a nice simple fix.