mobile

public/css/style.css

@@ -252,6 +252,9 @@ p {
   display: flex;
   justify-content: space-between;
 }
+.tt-container > div {
+  width: 100%;
+}
 .tt-container > div:nth-child(1) {
   background-color: #0276CF;
   color: #fff;
@@ -282,3 +285,129 @@ p {
   background-color: #ffffff;
   border-bottom: 1px solid #ddd;
 }
+.border-lg-start {
+  border-left: 1px solid #ccc;
+}
+@media screen and (max-width:1399px) {
+  .nav-item {
+    margin-left: 1rem;
+  }
+  .fp-container {
+    padding: 40px;
+    top:-25rem;
+    margin-bottom: -26.5rem;
+    position: relative;
+  }
+  .fp-container img {
+    height: 30px;
+    width: 30px;
+  }
+  .fp-container h5 {
+    font-size: 25px;
+  }
+  .title {
+    font-size: 45px;
+  }
+  .subtitle {
+    font-size: 35px;
+  }
+  .tt-container {
+    flex-wrap: wrap;
+  }
+  .tt-container > div{
+    width: 50%;
+  }
+}
+@media screen and (max-width:1199px) {
+  .fp-container {
+    top:0;
+    margin-bottom: 0;
+    padding: 30px 40px;
+  }
+  .nav-item {
+    margin-left: .5rem;
+  }
+  .nav-link {
+    font-size: 15px;
+  }
+  .navbar-brand {
+    margin: 0;
+  }
+  .navbar-brand img {
+    max-width: 200px;
+  }
+  .top-blue a {
+    font-size: 14px;
+    padding-bottom: 0;
+  }
+  .ft-spacing {
+    padding-left: 50px;
+    margin-left: 50px;
+  }
+  .box-1, .box-2, .box-3, .box-4 {
+    padding: 30px 40px;
+  }
+  .header{
+    font-size: 25px;
+  }
+}
+@media screen and (max-width:991px) {
+  #navBar {
+    position: absolute;
+    background-color: #ffffff;
+    width: 100%;
+    left: 0;
+    margin-top: 17px;
+  }
+  .dropdown-menu {
+    margin-top: 0 !important;
+    margin-bottom: 10px;
+  }
+  .navbar-toggler {
+    padding: 10px;
+    border: 1px solid #aaa;
+    margin-left: 10px;
+  }
+  .navbar-toggler:focus {
+    box-shadow: none !important;
+  }
+  .navbar-brand img {
+    max-width: 250px;
+  }
+}
+@media screen and (max-width:767px) {
+  .ft-spacing {
+    padding-left: 30px;
+    margin-left: 30px;
+  }
+  .fx-symptoms {
+    flex-wrap: wrap;
+  }
+  .fx-symptoms > div {
+    width: 30%;
+  }
+  .tt-container > div{
+    width: 100%;
+  }
+}
+@media screen and (max-width:500px) {
+  .navbar-brand img {
+    max-width: 180px;
+  }
+  .top .title {
+    text-align: center;
+  }
+  .title {
+    font-size: 40px;
+  }
+  .subtitle {
+    font-size: 32px;
+  }
+  .header {
+    font-size: 27px;
+  }
+  .ft-spacing {
+    padding-left: 20px;
+    margin-left:10px;
+  }
+}

resources/views/app/about-hem.blade.php

@@ -14,7 +14,7 @@
     <div class="container-fluid">
         <div class="row">
             <div class="col-lg-6">
-                <div class="container py-5" style="max-width:700px">
+                <div class="container py-lg-5 py-4" style="max-width:700px">
                   <div class="row align-items-center justify-content-end">
                     <div class="col-xl-10 p-0 py-lg-4">
                       <h4 class="subtitle mb-4">What are hemorrhoids?</h4>
@@ -33,13 +33,16 @@
                   </div>
                 </div>
             </div>
+            <div class="d-lg-none d-block col-10 offset-1">
+              <img src="{{asset('/img/about-hem.png')}}" class="w-100" alt="">
+            </div>
             <div class="col-lg-6 p-0 about-hem"></div>
         </div>
     </div>
 </div>
 <div class="container py-5">
   <div class="row">
-    <div class="col-lg-3">
+    <div class="col-lg-3 mb-4">
       <h4 class="subtitle mb-3">What causes <br class="d-lg-block d-none"> hemorrhoids:</h4>
       <a href="#" class="btn btn-pry">Learn more</a>
     </div>

resources/views/app/contact.blade.php

@@ -12,16 +12,16 @@
 </div>
 <div class="container py-5 my-4">
   <div class="row">
-    <div class="col-lg-6 bg-grey p-lg-5 p-4">
+    <div class="col-lg-6 bg-grey p-lg-5 p-4 mb-4" style="border-bottom:7px solid var(--pry-color);">
       <h4 class="subtitle">Get in touch with us:</h4>
       <p class="mb-4">Send us Message and we will get back to you!</p>
       <form class="" action="" method="post">
         @csrf
-        <div class="row mb-4">
-          <div class="col-lg-6 form-group">
+        <div class="row">
+          <div class="col-lg-6 form-group mb-4">
             <input type="text" class="form-control rounded-0 py-3" name="fname" placeholder="First Name" required value="">
           </div>
-          <div class="col-lg-6 form-group">
+          <div class="col-lg-6 form-group mb-4">
             <input type="text" class="form-control rounded-0 py-3" name="lname" placeholder="Last Name" required value="">
           </div>
         </div>
@@ -40,18 +40,18 @@
     <div class="col-lg-5 offset-lg-1">
       <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7319.087334623804!2d-75.68153637595971!3d39.66958345452699!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c700d1a9f368ed%3A0xe0065e295c0b7653!2s258%20Chapman%20Rd%2C%20Newark%2C%20DE%2019702%2C%20USA!5e0!3m2!1sen!2ske!4v1665057570431!5m2!1sen!2ske" height="350" class="w-100" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
       <div class="row mt-5">
-        <div class="col-lg-6">
+        <div class="col-sm-6 mb-4">
           <h5 class="header m-0">Our Office</h5>
-          <hr class="w-75 my-3">
+          <hr class="w-100 my-3">
           <div class="">
             258 Chapman Road, <br>
             Suite 101-A, <br>
             Newark, DE 19702
           </div>
         </div>
-        <div class="col-lg-6">
+        <div class="col-sm-6 mb-4">
           <h5 class="header m-0">Contact</h5>
-          <hr class="w-75 my-3">
+          <hr class="w-100 my-3">
           <h5 class="mb-2">General questions</h5>
           <div class="mb-4">
             <a class="text-dark" href="mailto:info@snyderhemband.com">info@snyderhemband.com</a> <br>

resources/views/app/index.blade.php

@@ -4,11 +4,11 @@
   <div class="dark">
     <div class="container">
       <div class="row">
-        <div class="col-lg-5">
-          <h4 class="title">Non-Surgical Treatment for Hemorrhoids.</h4>
-          <div class="d-flex align-items-center mt-4">
+        <div class="col-xl-5 col-lg-6">
+          <h4 class="title">Non-Surgical Treatment for Hemorrhoids</h4>
+          <div class="d-sm-flex text-sm-start text-center align-items-center mt-4">
             <a href="#" class="btn btn-pry">See how it works</a>
-            <a href="#" class="text-white ms-5">Buy Snyder Hemband <i class="ms-2 fal fa-angle-right"></i> </a>
+            <a href="#" class="text-white d-block ms-sm-5 mt-sm-0 mt-4">Buy Snyder Hemband <i class="ms-2 fal fa-angle-right"></i> </a>
           </div>
         </div>
       </div>
@@ -17,13 +17,13 @@
 </div>
 <div class="container py-5">
   <div class="row align-items-baseline">
-    <div class="col-lg-5">
+    <div class="col-xl-5 col-10 offset-xl-0 offset-1 text-xl-start text-center mb-xl-0 mb-4">
       <h4 class="subtitle">For patients</h4>
       <div class="mt-4">
-        <img src="{{asset('img/fp.png')}}" alt="">
+        <img src="{{asset('img/fp.png')}}" class="w-100" alt="">
       </div>
     </div>
-    <div class="col-lg-6 offset-lg-1 position-relative">
+    <div class="col-xl-6 offset-xl-1 position-relative">
       <div class="fp-container">
         <div class="border-bottom pb-3 mb-4">
           <div class="d-flex align-items-center mb-2">
@@ -58,9 +58,9 @@
   </div>
 </div>
 
-<div class="container py-5">
+<div class="container py-xl-5">
   <div class="row">
-    <div class="col-lg-6 pe-lg-0">
+    <div class="col-xl-6 pe-xl-0">
       <div class="box-1">
         <div class="d-flex flex-column">
           <h5 class="subtitle">About Snyder Hemband</h5>
@@ -75,16 +75,16 @@
         </div>
       </div>
     </div>
-    <div class="col-lg-6 p-lg-0">
+    <div class="col-xl-6 p-xl-0">
       <div class="box-2">
         <div class="d-flex flex-column">
           <h5 class="header">Hemorrhoids</h5>
-          <p class="mb-4">Hemorrhoids emerge when the veins around your anus or your lower rectum get swollen and inflamed. It can be internal or external. Hemorrhoids are prevalent in men and women and affect 1 in 20 Americans. It is most common in adults over the age of 50</p>
+          <p class="mb-4">Hemorrhoids emerge when the veins around your anus or your lower rectum get swollen and inflamed. It can be internal or external. Hemorrhoids are prevalent in men and women and affect 1 in 20 Americans. It is most common in adults over the age of 50.</p>
           <a href="#" class="text-white d-block mt-auto text-end">Learn more <i class="ms-1 fal fa-angle-right"></i> </a>
         </div>
       </div>
-    <div class="row m-0 box-container">
-      <div class="col-lg-6 p-lg-0">
+    <div class="row m-xl-0 box-container">
+      <div class="col-xl-6 p-xl-0">
         <div class="box-3">
           <div class="d-flex flex-column">
             <h5 class="header">Post-care</h5>
@@ -93,7 +93,7 @@
           </div>
         </div>
       </div>
-      <div class="col-lg-6 p-lg-0">
+      <div class="col-xl-6 p-xl-0">
         <div class="box-4">
           <div class="d-flex flex-column">
             <h5 class="header">Comparision</h5>
@@ -107,17 +107,17 @@
   </div>
 </div>
 
-<div class="container py-5">
-  <div class="d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom">
-    <h4 class="subtitle m-0">What physicians have to say</h4>
+<div class="container py-xl-5 py-4">
+  <div class="d-md-flex align-items-center justify-content-between mb-4 pb-3 border-bottom">
+    <h4 class="subtitle mb-0 mb-2">What physicians have to say</h4>
     <a href="#">For Phycisians <i class="ms-1 fal fa-angle-right"></i> </a>
   </div>
   <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-6">
       <div class="border row m-0">
-        <div class="col-lg-4 ps-0 d-lg-block d-none doc-bg" style="background-image:url('{{asset('img/ph-1.png')}}')">
+        <div class="col-xl-4 col-lg-3 col-md-4 ps-0 d-md-block d-none doc-bg" style="background-image:url('{{asset('img/ph-1.png')}}')">
         </div>
-        <div class="col-lg-8 p-4">
+        <div class="col-xl-8 col-lg-9 col-md-8 p-4">
           <div class="d-flex mt-3 align-items-center">
             <h4 class="m-0 font-weight-bold">Dr. Nayan Shah</h4>
             <a href="#" class="ms-2"><img src="{{asset('img/linkedin_ic.svg')}}" alt=""> </a>
@@ -131,11 +131,11 @@
         </div>
       </div>
     </div>
-    <div class="col-lg-6">
+    <div class="col-xl-6 mt-xl-0 mt-4">
       <div class="border row m-0">
-        <div class="col-lg-4 ps-0 d-lg-block d-none doc-bg" style="background-image:url('{{asset('img/ph-2.png')}}')">
+        <div class="col-xl-4 col-lg-3 col-md-4 ps-0 d-md-block d-none doc-bg" style="background-image:url('{{asset('img/ph-2.png')}}')">
         </div>
-        <div class="col-lg-8 p-4">
+        <div class="col-xl-8 col-lg-9 col-md-8 p-4">
           <div class="d-flex mt-3 align-items-center">
             <h4 class="m-0 font-weight-bold">Dr. Nayan Shah</h4>
             <a href="#" class="ms-2"><img src="{{asset('img/linkedin_ic.svg')}}" alt=""> </a>
@@ -153,11 +153,11 @@
 </div>
 <div class="mt-4 mb-5 bg-grey pt-5">
   <div class="container">
-    <div class="row mt-lg-5 mt-4">
-      <div class="col-lg-5">
+    <div class="row mt-xl-5 mb-xl-0 my-4">
+      <div class="col-xl-5 mb-0 d-xl-block d-none">
         <img src="{{asset('img/serve.png')}}" class="w-100" alt="">
       </div>
-      <div class="col-lg-6 offset-lg-1">
+      <div class="col-xl-6 offset-xl-1">
         <h4 class="subtitle">Who we serve</h4>
         <p>We supply the product Snyder Hemband which is used for treating hemorrhoids through a non-surgical approach in the clinical or hospital setting. It is used by a trained professional who serves patients with hemorrhoids.</p>
 
@@ -174,28 +174,28 @@
     </div>
   </div>
 </div>
-<div class="container py-5">
+<div class="container py-md-5 py-4">
   <div class="text-center">
     <h4 class="title mb-3">Snyder Hemband</h4>
     <p>Snyder hemband is a device for treating hemorrhoids. The components of this device <br class="d-lg-block d-none">  include an inner tube, plunger, outer tube, thumb pusher, loading device, and elastic band.</p>
   </div>
-  <div class="border mt-5 mb-4 p-5 text-center">
+  <div class="border mt-5 mb-4 p-md-5 p-3 text-center">
     <img src="{{asset('img/snyder.png')}}" class="w-75" alt="">
   </div>
-  <div class="d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom">
+  <div class="d-md-flex align-items-center justify-content-between mb-md-4 mb-2 pb-3 border-bottom">
     <h4 class="header m-0">Snyder Hemband process in 3 steps:</h4>
-    <a href="#" class="btn btn-pry px-5">Order now</a>
+    <a href="#" class="btn btn-pry px-5 mt-md-0 mt-3">Order now</a>
   </div>
   <div class="row">
-    <div class="col-lg-4 p-4">
+    <div class="col-lg-4 p-md-4 pt-3">
       <h4 class="mb-3">1. Ligation process</h4>
       <p class="text-justify border-bottom pb-4">Ligation process treats bleeding or prolapsing internal hemorrhoids. In this procedure, a doctor places a special rubber band (non-latex option is available on request) around the base of the hemorrhoids in an outpatient clinic setting or hospital.Use of anascope is optional based on discretion of physicians. No pre-procedure such as anesthesia or sterilization is required.</p>
     </div>
-    <div class="col-lg-4 p-4">
+    <div class="col-lg-4 p-md-4 pt-3">
       <h4 class="mb-3">2. Destroying hemorrhoids</h4>
       <p class="text-justify border-bottom pb-4">The blood supply gets cut off and the banded part of hemorrhoid dries up and falls off mostly within a week. Scar tissue left behind gets healed by itself. A trained doctor performs this procedure and one should never try to do it by himself.</p>
     </div>
-    <div class="col-lg-4 p-4">
+    <div class="col-lg-4 p-md-4 pt-3">
       <h4 class="mb-3">3. Post-treatment care</h4>
       <p class="text-justify border-bottom pb-4">Maintain a regular exercise routine and a healthy weight to help avoid the recurrence of hemorrhoids. Continue to take your usual medications as prescribed. Check with your physician about medications that could cause constipation or diarrhea. Unless your doctor directs you to do so, do not insert medication inside your rectum.</p>
     </div>

resources/views/app/post-care.blade.php

@@ -13,13 +13,13 @@
 <div class="bg-grey py-5">
   <div class="container py-lg-4">
     <div class="row align-items-center">
-      <div class="col-lg-4">
-        <h5 class="title mb-4">Your treatment with Snyder Hemband</h5>
+      <div class="col-xl-4 col-lg-5 mb-lg-0 mb-4">
+        <h5 class="subtitle mb-4">Your treatment with Snyder Hemband</h5>
         <p>A small rubber band is placed around the base of a hemorrhoid using Snyder Hemband by your doctor.</p>
         <p>The blood supply to the hemorrhoid is reduced by the generation of compression, causing it to shrink and eventually fall off. This forms a small scar at the base of the hemorrhoid which will heal in just a few days.</p>
         <p>The banding is done above the dentate line, a section of rectum with a very low number of pain-sensitive nerves. This is why the procedure is painless.</p>
       </div>
-      <div class="col-lg-7 offset-lg-1">
+      <div class="col-xl-7 col-lg-6 offset-lg-1">
         <img src="{{asset('img/pc-top.png')}}" class="w-100" alt="">
       </div>
     </div>

resources/views/app/snyder.blade.php

@@ -10,13 +10,15 @@
         </nav>
     </div>
     <hr>
-    <div class="py-5 mb-4">
-        <div class="text-center">
-            <h4 class="title mb-3">Snyder Hemband</h4>
-            <p class="mb-4">Snyder hemband is a device for treating hemorrhoids. The components of this device <br class="d-lg-block d-none"> include an inner tube, plunger, outer tube, thumb pusher, loading device, and elastic band.</p>
-            <a href="#" class="btn btn-pry py-2">Order now</a>
-            <a href="#" class="btn btn-secondary rounded-0 py-2 px-5 ms-4">Benefits</a>
-        </div>
+    <div class="container">
+      <div class="py-5 mb-4">
+          <div class="text-center">
+              <h4 class="title mb-3">Snyder Hemband</h4>
+              <p class="mb-4">Snyder hemband is a device for treating hemorrhoids. The components of this device <br class="d-lg-block d-none"> include an inner tube, plunger, outer tube, thumb pusher, loading device, and elastic band.</p>
+              <a href="#" class="btn btn-pry py-2">Order now</a>
+              <a href="#" class="btn btn-secondary rounded-0 py-2 px-5 ms-4">Benefits</a>
+          </div>
+      </div>
     </div>
 </div>
 <div class="container">
@@ -28,32 +30,32 @@
             <h4 class="subtitle mb-3">Benefits of using our product:</h4>
         </div>
         <div class="col-lg-6 offset-lg-1">
-            <div class="row mb-lg-4">
-                <div class="col-lg-5">
+            <div class="row mb-sm-4">
+                <div class="d-lg-block d-flex flex-column align-items-center text-sm-start text-center col-sm-5">
                     <img src="{{asset('img/benefits/ben-1.svg')}}" width="45" alt="">
                     <p class="mt-2">No sedation is required prior to treatment</p>
                 </div>
-                <div class="col-lg-5 offset-lg-2">
+                <div class="d-lg-block d-flex flex-column align-items-center text-sm-start text-center col-sm-5 offset-sm-2">
                     <img src="{{asset('img/benefits/ben-2.svg')}}" width="45" alt="">
                     <p class="mt-2">It causes no pain</p>
                 </div>
             </div>
-            <div class="row mb-lg-4">
-                <div class="col-lg-5">
+            <div class="row mb-sm-4">
+                <div class="d-lg-block d-flex flex-column align-items-center text-sm-start text-center col-sm-5">
                     <img src="{{asset('img/benefits/ben-3.svg')}}" width="45" alt="">
                     <p class="mt-3">It has a great success rate as it prevents early deployment of elastic bands.</p>
                 </div>
-                <div class="col-lg-5 offset-lg-2">
+                <div class="d-lg-block d-flex flex-column align-items-center text-sm-start text-center col-sm-5 offset-sm-2">
                     <img src="{{asset('img/benefits/ben-4.svg')}}" width="45" alt="">
                     <p class="mt-3">Latex free option of elastic band is available for those allergic to latex.</p>
                 </div>
             </div>
-            <div class="row mb-lg-4">
-                <div class="col-lg-5">
+            <div class="row mb-4">
+                <div class="d-lg-block d-flex flex-column align-items-center text-sm-start text-center col-sm-5">
                     <img src="{{asset('img/benefits/ben-5.svg')}}" width="45" alt="">
                     <p class="mt-3">Proper grip mechanism makes the treatment quicker than other ligation treatment.</p>
                 </div>
-                <div class="col-lg-5 offset-lg-2">
+                <div class="d-lg-block d-flex flex-column align-items-center text-sm-start text-center col-sm-5 offset-sm-2">
                     <img src="{{asset('img/benefits/ben-6.svg')}}" width="45" alt="">
                     <p class="mt-3">Treatment is covered by most insurance providers.</p>
                 </div>
@@ -64,7 +66,7 @@
 <div class="bg-grey py-5">
     <div class="container">
         <div class="row justify-content-center text-center">
-            <div class="col-lg-7">
+            <div class="col-xl-7 col-lg-9">
                 <h4 class="subtitle">How does Snyder Hemband work?</h4>
                 <p class="pb-3">Snyder Hemband is the system which allows a physician to place a gentle medical rubber band safely around the base of hemorrhoids. The soft rubber band generates the compression around the hemorrhoids reducing the
                     blood supply which causes it to shrink and eventually fall off. It is a painless procedure with little discomfort occasionally. The banding is done above the dentate line, a section of rectum with a very low number of
@@ -84,8 +86,8 @@
     </div>
     <div class="row">
       <div class="col-lg-6 mb-lg-5 mb-4">
-        <div class="d-flex align-items-start">
-          <div class="me-lg-4">
+        <div class="d-sm-flex d-center text-sm-start text-center align-items-start">
+          <div class="me-lg-4 me-sm-3">
             <img src="{{asset('img/treatment/treatment-1.svg')}}" width="70" alt="">
           </div>
           <div class="">
@@ -95,8 +97,8 @@
         </div>
       </div>
       <div class="col-lg-6 mb-lg-5 mb-4">
-        <div class="d-flex align-items-start">
-          <div class="me-lg-4">
+        <div class="d-sm-flex d-center text-sm-start text-center align-items-start">
+          <div class="me-lg-4 me-sm-3">
             <img src="{{asset('img/treatment/treatment-2.svg')}}" width="50" alt="">
           </div>
           <div class="">
@@ -108,8 +110,8 @@
     </div>
     <div class="row">
       <div class="col-lg-6 mb-4">
-        <div class="d-flex align-items-start">
-          <div class="me-lg-4">
+        <div class="d-sm-flex d-center text-sm-start text-center align-items-start">
+          <div class="me-lg-4 me-sm-3">
             <img src="{{asset('img/treatment/treatment-3.svg')}}" width="60" alt="">
           </div>
           <div class="">
@@ -118,9 +120,9 @@
           </div>
         </div>
       </div>
-      <div class="col-lg-6 mb-4">
-        <div class="d-flex align-items-start">
-          <div class="me-lg-4">
+      <div class="col-lg-6 mb-sm-4">
+        <div class="d-sm-flex d-center text-sm-start text-center align-items-start">
+          <div class="me-lg-4 me-sm-3">
             <img src="{{asset('img/treatment/treatment-4.svg')}}" width="50" alt="">
           </div>
           <div class="">

resources/views/app/treatment.blade.php

@@ -13,12 +13,12 @@
 <div class="bg-grey py-5">
   <div class="container py-lg-4">
     <div class="row">
-      <div class="col-lg-4">
+      <div class="col-xl-4">
         <h5 class="subtitle">Treatment guide</h5>
         <p>Hemorrhoids can most often be treat at home by:</p>
       </div>
-      <div class="col-lg-4">
-        <div class="d-flex align-items-start mb-4 mt-lg-3">
+      <div class="col-xl-4 col-md-6">
+        <div class="d-flex align-items-start mb-4 mt-md-3">
           <div class="">
             <img src="{{asset('img/tt-guide/guide-1.svg')}}" class="guide-img" alt="">
           </div>
@@ -51,8 +51,8 @@
           </div>
         </div>
       </div>
-      <div class="col-lg-4">
-        <div class="d-flex align-items-start mb-4 mt-lg-3">
+      <div class="col-xl-4 col-md-6">
+        <div class="d-flex align-items-start mb-4 mt-md-3">
           <div class="">
             <img src="{{asset('img/tt-guide/guide-5.svg')}}" class="guide-img" alt="">
           </div>
@@ -82,33 +82,33 @@
 </div>
 <div class="container py-5">
   <div class="row justify-content-center">
-    <div class="col-lg-7 pb-lg-5 pt-lg-3 text-center">
+    <div class="col-xl-7 col-lg-9 pb-5 pt-3 text-center">
       <p>Most often, doctors advise using over-the-counter products for 1 week. Follow up with your doctor if there is no relief in your symptoms after 1 week and/or your symptoms have worsened. Most prolapsed internal hemorrhoids go away without at-home treatment. However, severely prolapsed or bleeding internal hemorrhoids may need medical treatment.</p>
     </div>
     <hr>
-    <div class="col-lg-7 pt-lg-4 text-center">
-      <h5 class="subtitle mb-3">How do doctors <br class="d-lg-block d-none"> treat hemorrhoids?</h5>
-      <p>Hemorrhoids are treated by a doctor during an office visit or in an outpatient center or in a hospital. <br> The following procedures can be done in an office setting</p>
+    <div class="col-xl-7 col-lg-9 pt-4 text-center">
+      <h5 class="subtitle mb-3">How do doctors <br class="d-md-block d-none"> treat hemorrhoids?</h5>
+      <p>Hemorrhoids are treated by a doctor during an office visit or in an outpatient center or in a hospital. The following procedures can be done in an office setting</p>
     </div>
   </div>
   <div class="mt-4 col-lg-12">
     <div class="tt-container">
-      <div class="w-100 p-lg-5 p-4 d-flex flex-column">
+      <div class="p-lg-5 p-4 d-flex flex-column">
         <h5 class="header mb-3">Rubber band ligation</h5>
         <p class="mb-4">Ligation treatment is used by doctors to treat bleeding or prolapsing internal hemorrhoids. In this treatment, a doctor places a special rubber band around the base of the hemorrhoids. The blood supply gets cut off and the banded part of the hemorrhoid dries up and falls off within a week mostly. Scar tissue left behind gets healed by itself. This procedure is performed by trained doctors and one should never try to do it by himself.</p>
         <a href="#" class="text-white mt-auto text-end">Learn more <i class="fal fa-angle-right"></i></a>
       </div>
-      <div class="w-100 p-lg-5 p-4 d-flex flex-column">
+      <div class="p-lg-5 p-4 d-flex flex-column">
         <h5 class="header mb-3">Sclerotherapy</h5>
         <p class="mb-4">A solution is injected into the internal hemorrhoid by a doctor, which causes scar tissue to form. The scar tissue cuts off the blood supply, often shrinking hemorrhoids.</p>
         <a href="#" class="text-white mt-auto text-end">Learn more <i class="fal fa-angle-right"></i></a>
       </div>
-      <div class="w-100 p-lg-5 p-4 d-flex flex-column">
+      <div class="p-lg-5 p-4 d-flex flex-column">
         <h5 class="header mb-3">Infrared photocoagulation</h5>
         <p class="mb-4"> In this, a doctor utilizes a tool that directs infrared light at the internal hemorrhoid. The heat created by the infrared light causes scar tissue to form, which cuts off the blood supply, often shrinking hemorrhoids.</p>
         <a href="#" class="text-white mt-auto text-end">Learn more <i class="fal fa-angle-right"></i></a>
       </div>
-      <div class="w-100 p-lg-5 p-4 d-flex flex-column">
+      <div class="p-lg-5 p-4 d-flex flex-column">
         <h5 class="header mb-3">Rubber band ligation</h5>
         <p class="mb-4">A doctor uses a tool that sends an electric current into the internal hemorrhoid. The electric current causes scar tissue to form, which cuts off the blood supply, often shrinking hemorrhoids.</p>
         <a href="#" class="text-dark mt-auto text-end">Learn more <i class="fal fa-angle-right"></i></a>

resources/views/layouts/app.blade.php

@@ -36,10 +36,12 @@
                     <img src="{{asset('/img/logo.svg')}}" alt="Logo">
                 </a>
                 <div>
-                    <a class="d-lg-none d-inline btn rounded-0 btn-pry px-3 py-2" href="{{ route('index') }}">Order Now</a>
-                    <button class="navbar-toggler p-2" type="button" data-bs-toggle="collapse" data-bs-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
-                        <i class="fas fa-bars"></i>
-                    </button>
+                    <div class="d-flex align-items-center">
+                      <a class="d-lg-none d-inline btn rounded-0 btn-pry px-3 py-2" href="{{ route('index') }}">Order Now</a>
+                      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
+                          <i class="fas fa-bars"></i>
+                      </button>
+                    </div>
                     <div class="collapse navbar-collapse" id="navBar">
                         <ul class="navbar-nav ms-auto align-items-lg-center">
                             <li class="nav-item">
@@ -91,10 +93,10 @@
       <div class="bg-light py-5">
         <div class="container">
           <div class="row align-items-center justify-content-center">
-            <div class="col-lg-2">
-              <img src="{{asset('img/fda.svg')}}" width="200" alt="">
+            <div class="col-xl-2 col-lg-3 col-4">
+              <img src="{{asset('img/fda.svg')}}" class="w-100" alt="">
             </div>
-            <div class="col-lg-4 border-start ft-spacing">
+            <div class="col-lg-4 col-6 border-lg-start ft-spacing">
               <h4>Useful links</h4>
               <p><a href="#"><u>Ligation wikipedia</u></a></p>
               <p><a href="#"><u>What are hemorrhoids</u></a></p>
@@ -107,19 +109,19 @@
       </div>
       <div class="bg-grey py-5">
         <div class="container">
-          <div class="d-flex align-items-center justify-content-between">
-            <h4 class="header m-0">Considering Snyder Hemband? Reach out!</h4>
-            <a href="{{route('contact')}}" class="btn btn-pry px-5">Contact us</a>
+          <div class="d-lg-flex align-items-center justify-content-between w-100">
+            <h4 class="header m-0">Considering Snyder Hemband? <br class="d-md-none d-block"> Reach out!</h4>
+            <a href="{{route('contact')}}" class="btn btn-pry px-5 mt-lg-0 mt-3">Contact us</a>
           </div>
         </div>
       </div>
       <div class="bg-pry pt-5">
         <div class="container">
             <div class="row mb-4">
-              <div class="col-lg-3">
-                <img src="{{asset('img/logo_white.svg')}}" class="w-75" alt="">
+              <div class="col-lg-3 mb-4">
+                <img src="{{asset('img/logo_white.svg')}}" width="250" alt="">
               </div>
-              <div class="col-lg-3">
+              <div class="col-lg-3 col-md-4">
                 <p class="mb-4"><a href="#" class="text-white">Snyder Hemband</a></p>
                 <div class="dropdown">
                   <a class="text-white mb-4 d-block dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -134,21 +136,21 @@
                 </div>
                 <p class="mb-4"><a href="{{route('compare')}}" class="text-white">Comparing treatment options</a></p>
               </div>
-              <div class="col-lg-3">
+              <div class="col-lg-3 col-md-3 offset-lg-0 offset-md-1">
                 <p class="mb-4"><a href="#" class="text-white">For patients</a></p>
                 <p class="mb-4"><a href="#" class="text-white">For physicians</a></p>
                 <p class="mb-4"><a href="#" class="text-white">Login</a></p>
                 <p class="mb-4"><a href="#" class="text-white">Register</a></p>
               </div>
-              <div class="col-lg-3">
+              <div class="col-lg-3 col-md-4">
                 <p class="mb-4"><a href="{{route('contact')}}" class="text-white">Contact form</a></p>
                 <p class="mb-4"><a href="#" class="text-white">info@snyderhemband.org</a></p>
                 <p class="mb-4"><a href="#" class="text-white">+XXX XXX XXX</a></p>
               </div>
             </div>
             <hr class="bg-white">
-            <div class="d-flex align-items-center justify-content-between pb-2">
-              <div class="text-white">
+            <div class="d-lg-flex text-lg-start text-center align-items-center justify-content-between pb-2">
+              <div class="text-white mb-lg-0 mb-3">
                 <span class="opacity-75">&copy; 2022 SNYDER HEMBAND - All rights reserved.</span>
               </div>
               <div class="">