diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index a93b977f68..799ea4f270 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -21,11 +21,11 @@
 <div class="feature" id="feature-auto">
 	<div class="container">
 		<div class="row">
-			<div class="col-lg-7 col-md-7">
+			<div class="col-lg-7 col-md-7 col-sm-12">
 				<h2 class="feature-t">Automatically build  infrastructure from code</h2>
 				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum nibh vitae quam dapibus, nec sodales dolor sodales. Class aptent taciti sociosqu ad litora.</p>
 			</div>
-			<div class="col-lg-5 col-md-5">
+			<div class="col-lg-5 col-md-5 col-sm-12">
 				<h3 class="terminal-text">$ terraform apply</h3>
 			</div>			
 		</div>
diff --git a/website/source/stylesheets/_home.less b/website/source/stylesheets/_home.less
index 8c6aeedd07..a4958a072d 100755
--- a/website/source/stylesheets/_home.less
+++ b/website/source/stylesheets/_home.less
@@ -443,6 +443,14 @@
 
 
 @media (max-width: 992px) {
+
+	.feature{
+		h2,p{
+			text-align: center !important;
+			padding-left: 0 !important;
+		}
+	}
+
 	#demos{
 		.terminals{
 			.terminal-item{
@@ -462,6 +470,14 @@
 }
 
 @media (max-width: 768px) {
+
+	.feature{
+		h2,p{
+			text-align: center;
+		}
+	}
+		
+
 	#demos{
 		.terminals{
 			.terminal-item{
diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css
index 3f10fba3aa..c5992f3e90 100644
--- a/website/source/stylesheets/main.css
+++ b/website/source/stylesheets/main.css
@@ -1022,11 +1022,20 @@ body.page-home #footer {
   }
 }
 @media (max-width: 992px) {
+  .feature h2,
+  .feature p {
+    text-align: center !important;
+    padding-left: 0 !important;
+  }
   #demos .terminals .terminal-item > header .right {
     padding-left: 54px;
   }
 }
 @media (max-width: 768px) {
+  .feature h2,
+  .feature p {
+    text-align: center;
+  }
   #demos .terminals .terminal-item > header .left span.icn {
     padding-bottom: 15px;
   }