Letters getting cut off from button when I make my window smaller

Question

My letters from my button are getting cut off whenever I make my window smaller. I am not sure how to implement a solution. I have provided the css and the html. I also provided picture for better understanding. I know I have to change or add something in the css but I am not sure what.

I am not sure how to implement a solution. I have provided the css and the html. I also provided picture for better understanding.

.button {
	display: inline-block;
	position: relative;
	cursor: pointer;
	outline: none;
	white-space: nowrap;
//	margin: 5px;
	padding: 0 22px;
	font-size: 14px;
	font-family: 'Roboto', sans-serif, 'Lato';
	height: 40px;
  width: 220px;
	line-height: 40px;
	background-color: #428bca;
	color: #FFF;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: none;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
   margin: 0 auto;
   text-align: center;

}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: #ffffff;
}

.panel-heading {

    color: #428bca;
    background-color: #428bca;
    border-top: 1px solid #dddddd;
  	border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;  
    //border-top-right-radius: 3px;
    //border-top-left-radius: 3px;
}

.panel-body {
    padding: 15px;
    border: 1px solid #dddddd;
}
.nobottommargin {
    margin-bottom: 0 !important;
}
.leftmargin-sm {
    margin-left: 30px !important;
}

.button.button-rounded {
	border-radius: 3px;
}

.button.button-reveal {
	padding: 0 28px;
	overflow: hidden;
}

.button.button-large {
	padding: 0 26px;
	font-size: 16px;
	height: 46px;
	line-height: 46px;
}

.button-teal {
	background-color: #428bca;
}

/*code for the icon */
.button-reveal i {
  position: absolute;
  width: 2em;
  height: 100%;
  line-height: 45px;
  background-color: rgba(0, 0, 0, .2);
  text-align: center;
  left: -100%;
  transition: left 0.25s ease;
}
.button-reveal:hover i {
  left: 0;
}
/* code for the letters*/
.button-reveal span {
  display: inline-block;
  margin: 0 2em;
  transition: margin 0.35s ease;
}
.button-reveal:hover span {
  margin: 0 1em 0 3em;
}

<div class="panel-heading">
								<h2 class="panel-title">Access This Service</h2>
							</div>

<div class="panel-body">
  <!-- angular -->
 		
  <div ng-if="c.html" ng-bind-html="c.html"></div>

 <a href="http://zoom.us" class="button button-rounded button-reveal button-large button-teal"><i class="fa fa-forward" aria-hidden="true"></i>
   <span>Go there now!</span></a><br>

Note: If you haven’t accessed Zoom before, create a new account at <a href="http://zoom.us">zoom.us</a>.
</div>

Answer 1

One possible route is to use @media query to control the button padding and other style attributes when the window is resized below a certain width.

Consider the following:

@media (max-width: 800px) {
  .button.test {
    padding: 0px;
  }
} 

This says that if the window is below 800px set padding 0 on the element with button and test style classes. When the window is resized above 800px wide, this selector is not applied.

The snippet below shows a button with and without application of @media query. I placed the query at the end of the stylesheet so padding is not overriden by other classes. You could also place it at the top of your file but then need to be careful so the cascading order doesn't override your styles.

View the snippet inline and then click on "full page" to see the padding change on the second button.

.button {
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  padding: 0 22px;
  font-size: 14px;
  font-family: 'Roboto', sans-serif, 'Lato';
  height: 40px;
  line-height: 40px;
  background-color: #428bca;
  color: #FFF;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  text-align: center;
}

.panel-heading {
  color: #428bca;
  background-color: #428bca;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  //border-top-right-radius: 3px;
  //border-top-left-radius: 3px;
}

.panel-body {
  padding: 15px;
  border: 1px solid #dddddd;
}

.nobottommargin {
  margin-bottom: 0 !important;
}

.leftmargin-sm {
  margin-left: 30px !important;
}

.button.button-rounded {
  border-radius: 3px;
}

.button.button-reveal {
  padding: 0 28px;
  overflow: hidden;
}

.button.button-large {
  padding: 0 26px;
  font-size: 16px;
  height: 46px;
  line-height: 46px;
}

.button-teal {
  background-color: #428bca;
}


/*code for the icon */

.button-reveal i {
  position: absolute;
  width: 2em;
  height: 100%;
  line-height: 45px;
  background-color: rgba(0, 0, 0, .2);
  text-align: center;
  left: -100%;
  transition: left 0.25s ease;
}

.button-reveal:hover i {
  left: 0;
}


/* code for the letters*/

.button-reveal span {
  display: inline-block;
  margin: 0 2em;
  transition: margin 0.35s ease;
}

.button-reveal:hover span {
  margin: 0 1em 0 3em;
}

@media (max-width: 800px) {
  .button.test {
    padding: 0px !important;
  }
}

<div>Button NOT affected by @media</div>


<a href="http://zoom.us" class="button button-rounded button-reveal button-large button-teal"><i class="fa fa-forward" aria-hidden="true"></i>
   <span>Go there now!</span></a>

<div style="margin-top:20px;">Button affected by @media</div>

<a href="http://zoom.us" class="button test button-rounded button-reveal button-large button-teal"><i class="fa fa-forward" aria-hidden="true"></i>
   <span>Go there now!</span></a>

Answer 2

Just add min-width to your button and it will be fine

.button {
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  //	margin: 5px;
  padding: 0 22px;
  font-size: 14px;
  font-family: 'Roboto', sans-serif, 'Lato';
  height: 40px;
  width: 220px;
  line-height: 40px;
  background-color: #428bca;
  color: #FFF;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  text-align: center;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: #ffffff;
}

.panel-heading {
  color: #428bca;
  background-color: #428bca;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  //border-top-right-radius: 3px;
  //border-top-left-radius: 3px;
}

.panel-body {
  padding: 15px;
  border: 1px solid #dddddd;
}

.nobottommargin {
  margin-bottom: 0 !important;
}

.leftmargin-sm {
  margin-left: 30px !important;
}

.button.button-rounded {
  border-radius: 3px;
}

.button.button-reveal {
  padding: 0 28px;
  overflow: hidden;
}

.button.button-large {
  padding: 0 26px;
  font-size: 16px;
  height: 46px;
  line-height: 46px;
}

.button-teal {
  background-color: #428bca;
}


/*code for the icon */

.button-reveal i {
  position: absolute;
  min-width: 2em;
  height: 100%;
  line-height: 45px;
  background-color: rgba(0, 0, 0, .2);
  text-align: center;
  left: -100%;
  transition: left 0.25s ease;
}

.button-reveal:hover i {
  left: 0;
}


/* code for the letters*/

.button-reveal span {
  display: inline-block;
  margin: 0 2em;
  transition: margin 0.35s ease;
}

.button-reveal:hover span {
  margin: 0 1em 0 3em;
}

<div class="panel-heading">
  <h2 class="panel-title">Access This Service</h2>
</div>

<div class="panel-body">
  <!-- angular -->

  <div ng-if="c.html" ng-bind-html="c.html"></div>

  <a href="http://zoom.us" class="button button-rounded button-reveal button-large button-teal"><i class="fa fa-forward" aria-hidden="true"></i>
   <span>Go there now!</span></a><br> Note: If you haven’t accessed Zoom before, create a new account at <a href="http://zoom.us">zoom.us</a>.
</div>