如何使此按钮响应？

Question

我有一个“了解更多”按钮，还有几个部分横幅，我正在努力做出回应。我尝试添加max-width：100％，这有点帮助，但不是很多。为了使其更具可读性，我只为部分横幅放置代码，因为代码非常相似。有什么想法吗？

//CSS for Column Titles
.col-title {
position: relative;
font-size: 1.2em;
font-weight: bold;
padding: 0px 0px 0px 20px;
margin: 7px 5px 5px -30px;
color: #FFF;
background-color: #2749aa; /* Old browsers */
background-repeat: repeat-x; /* Repeat the gradient */
background-image: -moz-linear-gradient(top, #547ef8 0%, #2749aa 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color- stop(0%,#547ef8), color-stop(100%,#2749aa)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #547ef8 0%,#2749aa 100%); /* Chrome 10+,Safari 5.1+ */
background-image: -ms-linear-gradient(top, #547ef8 0%,#2749aa 100%); /* IE10+ */
background-image: -o-linear-gradient(top, #547ef8 0%,#2749aa 100%); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#547ef8', endColorstr='#2749aa',GradientType=0 ); /* IE6-9 */
background-image: linear-gradient(top, #547ef8 0%,#2749aa 100%); /* W3C */
border: 1px solid #e5e5e5;
-webkit-border-radius: 4px;
 -moz-border-radius: 4px;
      border-radius: 4px;
 }

.col-title:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
.col-title:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -2px;
top: 0px;
border-color: transparent #fff transparent transparent;
}