Update

public/css/style.css

@@ -142,9 +142,6 @@ p {
   color: #333;
   display: grid;
 }
-.top .btn {
-  font-size: 20px;
-}
 .top > div {
 }
 .top .light-bg p{
@@ -186,7 +183,6 @@ p {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    width: 70%;
 }
 .steps > div {
   width: 100%;
@@ -349,7 +345,7 @@ p {
     font-size: 45px;
   }
   .subtitle {
-    font-size: 35px;
+    font-size: 34px;
   }
   .tt-container {
     flex-wrap: wrap;
@@ -414,6 +410,13 @@ p {
   .navbar-brand img {
     max-width: 250px;
   }
+  .steps {
+    flex-wrap: wrap;
+  }
+  .steps > div {
+    width: 45%;
+    padding-bottom: 30px;
+  }
 }
 @media screen and (max-width:767px) {
   .ft-spacing {
@@ -429,10 +432,17 @@ p {
   .tt-container > div{
     width: 100%;
   }
+  .md-title {
+    font-size: 35px
+  }
 }
 @media screen and (max-width:500px) {
   .navbar-brand img {
-    max-width: 180px;
+    max-width: 170px;
+  }
+  .steps > div {
+    width: 100%;
+    padding-bottom: 0px;
   }
   .top .title {
     text-align: center;
@@ -441,10 +451,10 @@ p {
     font-size: 40px;
   }
   .subtitle {
-    font-size: 32px;
+    font-size: 30px;
   }
   .header {
-    font-size: 27px;
+    font-size: 26px;
   }
   .ft-spacing {
     padding-left: 20px;
@@ -465,4 +475,7 @@ p {
   .md-title {
     font-size: 34px;
   }
+  .btn-pry, .btn-outline-pry{
+    font-size: 16px
+  }
 }

resources/views/app/index.blade.php

@@ -1,7 +1,7 @@
 @extends('layouts.app')
 @section('content')
 <div class="top">
-  <div class="">
+  <div class="py-5">
     <div class="container h-100 d-flex align-items-center">
       <div class="row">
         <div class="col-lg-7">
@@ -12,9 +12,9 @@
             <p class="mb-3">Non-surgical. Painless. Return to work immediately.</p>
             <p class="mb-3">Just a simple, medical-grade rubber band that takes a doctor <b>less than 60 seconds</b> to apply at the base of your hemorrhoid.</p>
             <p class="mb-3">The hemorrhoid shrinks and falls off, typically within 24 hours.</p>
-            <div class="d-sm-flex align-items-center my-4">
+            <div class="d-flex align-items-center my-4">
               <a href="#" class="btn btn-pry">Find a Clinic</a>
-              <a href="#" class="btn btn-outline-pry ms-sm-4 ms-0 mt-sm-0 mt-4">How it Works</a>
+              <a href="#" class="btn btn-outline-pry ms-4">How it Works</a>
             </div>
           </div>
         </div>
@@ -40,7 +40,7 @@
 
       </div>
     </div>
-    <div class="col-lg-5 offset-lg-1">
+    <div class="col-lg-5 offset-lg-1 mt-lg-0 mt-4">
       <div class="bg-dark text-white p-4">
         <h4>Hemorrhoids are common.</h4>
         <p>Hemorrhoids are very prevalent in both men and women. About half of all people will have hemorrhoids by age 50.</p>
@@ -69,10 +69,10 @@
           </h4>
           <h4 class="mb-3">1. It's fast, safe, and effective.</h4>
           <p class="border-bottom pb-4">Banding is the "gold-standard" for treating hemorrhoids, with a greater than 95% success rate. It takes less than a minute.</p>
-        
+
           <h4 class="mb-3">2. It's available near you!</h4>
           <p class="border-bottom pb-4">With thousands of physicians across the United States are trained in how to use the HemBand, there's a clinic near you!</p>
-        
+
           <h4 class="mb-3">3. It's covered by insurance.</h4>
           <p class="border-bottom pb-4">HemBand treatment is covered by most insurance plans, including Medicare, Medicaid, and TriCare.</p>
         </div>
@@ -113,23 +113,23 @@
 </div>
 
 <div class="container">
-  <div class="d-sm-flex align-items-start justify-content-between pt-5 pb-5">
-    <div class="text-center w-100 mb-sm-0 mb-4">
+  <div class="steps pt-5 pb-5">
+    <div class="text-center mb-sm-0 mb-4">
       <img src="{{asset('img/fp/fp-1.svg')}}" height="40">
       <p class="mt-3"><b>Fast & Safe</b></p>
       <p class="px-4">Banding takes less than a minute and is the standard of care, with a greater than 95% success rate.</p>
     </div>
-    <div class="text-center w-100 mb-sm-0 mb-4">
+    <div class="text-center mb-sm-0 mb-4">
       <img src="{{asset('img/fp/fp-3.svg')}}" height="40">
       <p class="mt-3"><b>Painless</b></p>
       <p class="px-4">Banding is painless, non-surgical, and requires no medication before or after treatment.</p>
     </div>
-    <div class="text-center w-100 mb-sm-0 mb-4">
+    <div class="text-center mb-sm-0 mb-4">
       <img src="{{asset('img/fp/fp-2.svg')}}" height="40">
       <p class="mt-3"><b>Long-Term Effectiveness</b></p>
       <p class="px-4">Instead of treating symptoms, banding gently removes hemorrhoids themselves.</p>
     </div>
-    <div class="text-center w-100 mb-sm-0 mb-4">
+    <div class="text-center mb-sm-0 mb-4">
       <img src="{{asset('img/fp/fp-4.svg')}}" height="40">
       <p class="mt-3"><b>Covered by Most Health Plans</b></p>
       <p class="px-4">Banding is covered by most major health plans including Medicare, Medicaid, and TriCare.</p>
@@ -195,14 +195,15 @@
     </div>
   </div>
 </div>
+
 <div class="mt-4 bg-grey py-5">
   <div class="container py-lg-4">
     <div class="row align-items-center">
-      <div class="col-xl-5 col-lg-6">
+      <div class="col-xl-5 col-lg-6 col-10 offset-lg-0 offset-1">
         <img src="{{asset('img/pc-top.png')}}" class="w-100" alt="">
       </div>
-      <div class="col-xl-5 offset-lg-1 col-lg-5 mb-lg-0 mb-4">
-        <h4 class="subtitle">Don't just treat your symptoms.</h4>
+      <div class="col-lg-5 offset-lg-1 mt-lg-0 mt-4">
+        <h4 class="subtitle w-100">Don't just treat your symptoms.</h4>
           <hr class="opacity-100">
           <h5>If you are experiencing any of the following:</h5>
           <ul>

resources/views/layouts/app.blade.php

@@ -79,14 +79,14 @@
 
 @section('footer')
 <footer>
-      <div class="py-5" style="background-color: #F7F7F7;">
+      <div class="py-lg-5 py-3" style="background-color: #F7F7F7;">
         <div class="container">
-          <div class="d-lg-flex align-items-center w-100">
+          <div class="d-sm-flex align-items-center w-100">
             <div>
               <h4 class="header m-0">Have any questions? <br class="d-md-none d-block"></h4>
             </div>
-            <div class="px-4">
-              <a href="{{route('contact')}}" class="btn btn-outline-pry px-5 mt-lg-0 mt-3">Contact us</a>
+            <div class="ps-sm-4">
+              <a href="{{route('contact')}}" class="btn btn-outline-pry px-5 mt-sm-0 mt-3">Contact us</a>
             </div>
           </div>
         </div>
@@ -139,4 +139,4 @@
         </div>
       </div>
     </footer>
-@endsection
+@endsection

resources/views/layouts/base.blade.php

@@ -20,12 +20,12 @@
 <body>
     <div class="border-bottom">
         <div class="container">
-            <div class="d-flex align-items-center justify-content-between">
-              <div class="p-1">
-                <strong style="width:154px;line-height:3px;font-size:14px;">This site is intended for U.S. audiences only.</strong>
+            <div class="d-md-flex align-items-center justify-content-between">
+              <div class="p-md-1">
+                <strong style="line-height:3px;font-size:14px;">This site is intended for U.S. audiences only.</strong>
               </div>
-              <div class="text-end">
-                <a class="ms-3 text-dark" href="tel:(800) 290-9092">(800) 290-9092</a>
+              <div class="text-md-end">
+                <a class="text-dark" href="tel:(800) 290-9092">(800) 290-9092</a>
                 <span class="ms-3">|</span>
                 @yield('context-switch-link')
               </div>